前端预览word文档实现

记录前端预览word文档的需求实现

方案一：XDOC文档预览

可以使用XDOC文档预览云服务来进行word文件的在线预览，直接去网站体验就知道怎么用了。
https://view.xdocin.com/

使用方法

https://view.xdocin.com/view?src=你的文档地址

例如：https://view.xdocin.com/view?src=https%3A%2F%2Fview.xdocin.com%2Fdemo%2Fview.docx

优点：

实现简单，只需要将文件地址拼在url参数中即可，且在页面会生成对应的目录结构。
文档地址也可以是IP地址。

缺点：

缺少了首行缩进、页面间距等效果
文档地址必须是对外可访问的，内网则无法使用该方案

方案二：使用微软官方提供的在线预览工具(限制较多，不推荐)

使用方法：

https://view.officeapps.live.com/op/view.aspx?src=你的文件的地址

优点：无

缺点：

文件的地址只能是域名，且不能包含端口号
与XDOC文档预览一样文档地址必须是对外可访问的，内网无法使用该方案

方案三：使用docx-preview插件预览docx后缀文件

使用方法

<template><div class="home"><a-button @click="goPreview">点击预览word文件</a-button><div class="docWrap"><!-- 预览文件的地方（用于渲染） --><div ref="file"></div></div></div>
</template>
<script>
import axios from 'axios';
// 引入docx-preview插件
let docx = require('docx-preview');
export default {data() {return {fileLink: 'http://ashuai.work:10000/getDoc'}},mounted() {console.log('使用插件的renderAsync方法来渲染', docx) //},methods: {// 预览goPreview() {axios({method: 'get',responseType: 'blob', // 因为是流文件，所以要指定blob类型url: this.fileLink // 一个word下载文件的接口}).then(({ data }) => {console.log(data) // 后端返回的是流文件/*** 第一个参数： data为文件流，Blob | ArrayBuffer | Uint8Array 格式* 第二个参数： 渲染到页面的dom元素* 第三个参数： 渲染word文档的样式的元素，如果为null，则设置到第二个参数的DOM上* 第四个参数： 配置对象*/docx.renderAsync(data, this.$refs.file, null, {className: 'text-docx', //class name/prefix for default and document style classesinWrapper: true, //enables rendering of wrapper around document contentignoreWidth: false, //disables rendering width of pageignoreHeight: false, //disables rendering height of pageignoreFonts: false, //disables fonts renderingbreakPages: true, //enables page breaking on page breaksignoreLastRenderedPageBreak: true, //disables page breaking on lastRenderedPageBreak elementsexperimental: true, //enables experimental features (tab stops calculation)trimXmlDeclaration: true, //if true, xml declaration will be removed from xml documents before parsinguseBase64URL: false, //if true, images, fonts, etc. will be converted to base 64 URL, otherwise URL.createObjectURL is useduseMathMLPolyfill: true, //includes MathML polyfills for chrome, edge, etc.debug: false //enables additional logging}) // 渲染到页面})}}
}</script>
<style lang="less" scoped>
.home {height: 100%;overflow: auto;
}
.docWrap {// 指定样式宽度width: 900px;overflow: auto;
}
</style>
<style>
.text-docx-wrapper {background: #fff !important;
}
</style>

可以在以下网址上传word文档体验预览：
https://volodymyrbaydalka.github.io/docxjs/

优点：

样式与word打开基本一直，不会像XDOC文档预览一样没有了首行缩进
接口返回文件流即可预览，内网也可以实现

缺点：

只能预览后缀为.docx的word文档，无法预览后缀为.doc的文档(如果实在要预览doc文件，可以考虑让后端复制源文件转成docx类型后返回前端文件流即可)
无法像XDOC文档预览一样生成对应的目录

前端预览word文档实现相关推荐

在线预览word文档
在线预览word文档在线预览word文档 Java 使用wps将word文件转换pdf文件转成PDF 在线预览word(转成pdf)前端展示欢迎来提更好的意见在线预览word文档昨天下午组长 ...
Springboot 超简单实现在线预览,Word文档 doc、xlsx、pdf、txt等
前言 PDF.TXT 只要资源可访问,根本就不需要进行任何处理,直接访问查看就完事了. 也是因为这个PDF可以直接查看(现在浏览器基本支持了),那么我们实现Word文档在线预览,其实也是把WORD文 ...
移动端h5页面预览word文档
在web端预览word文档,可以使用iframe来实现.但由于兼容性问题,并不能使用iframe在安卓和ios上预览文件经测试发现,mammoth插件可以实现该功能 <!DOCTYPE htm ...
java 预览word文档_Java实现office文档与pdf文档的在线预览功能
最近项目有个需求要java实现office文档与pdf文档的在线预览功能,刚刚接到的时候就觉得有点难,以自己的水平难以在三四天做完.压力略大.后面查找百度资料.以及在同事与网友的帮助下,四天多把它做完 ...
vue实现预览word文档（处理文档流）
效果图如下: 1.需要用到插件 npm i docx-preview --save 页面实现预览主要依靠插件,所以这是最重要的一步,如果你用的cnpm包管理器,那就是命令行 cnpm i docx-p ...
调用office web 365接口实现在线预览word文档，PDF,PPT
我项目中是直接用iframe显示: <iframe id="iframe_src" scrolling="auto" width="100% ...
java poi预览word文档_apache poi操作office文档----java在线预览txt、word、ppt、execel，pdf代码...
在页面上显示各种文档中的内容.在servlet中的逻辑 word: BufferedInputStream bis = null; URL url = null; HttpURLConnection ...
kkfileview在预览word文档中文乱码
因为liunx服务器没有相关中文字体 1.下载中文字体包 http://kkfileview.keking.cn/fonts.zip 2.上传服务器至目录/usr/share/fonts 解压 unz ...
web项目在线预览doc文档
在线预览word文档前端代码后台controller代码(使用Aspose.Words) 前端代码在前端发送ajax请求,并展示后端生成的html临时文件 showFile:function(m ...

前端预览word文档实现

方案一：XDOC文档预览

使用方法

优点：

缺点：

方案二：使用微软官方提供的在线预览工具(限制较多，不推荐)

使用方法：

优点：无

缺点：

方案三：使用docx-preview插件预览docx后缀文件

使用方法

优点：

缺点：

前端预览word文档实现相关推荐

最新文章

热门文章