简介

在项目中遇到了个需求，大致需求这样的：用户在上传文件前需要先预览一下内容，确认内容是否正确，正确的情况下才可以上传；
那么这里面会涉及到一个在上传前的文档的预览操作，下面就记录一下踩坑记录

docx-preview

这是一个 纯前端的JavaScript库，它的优点是能 纯前端，可以 不靠后端，对 .docx 的文件进行在线预览，缺点是 不支持doc，不支持doc，不支持doc，重要的事说三遍；
github地址如下：docx-preview，有兴趣的小伙伴可以仔细看一下官方介绍；

安装

npm install docx-preview -S

如果一直安装失败，可以试试使用 cnpm 进行安装

cnpm install docx-preview -S

另外，由于 解析的需要，使用时需要 额外安装引入一个解析库jszip，由于该库并非是以module的方式，需要在html中的header标签里引入，文件地址：https://unpkg.com/jszip/dist/jszip.min.js

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8" /><script src="https://unpkg.com/jszip/dist/jszip.min.js"></script></head><body></body>
</html>

建议在项目中直接将该文件直接下载下来，然后放入项目中；

使用

先看一下官方示例

<!--optional polyfill for promise-->
<script src="https://unpkg.com/promise-polyfill/dist/polyfill.min.js"></script>
<!--lib uses jszip-->
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="docx-preview.min.js"></script>
<script>var docData = <document Blob>;docx.renderAsync(docData, document.getElementById("container")).then(x => console.log("docx: finished"));
</script>
<body>...<div id="container"></div>...
</body>

简单的说，它有3个参数，第一个参数是接接收的文件数据流，第二个参数为容器，并且它有一个then的回调函数，执行成功会执行该函数，不过这个并非是它的全部API，具体的API可以前往github自行查找，这些个api实际应该用的非常少，这几个已经够用了；

Vue中使用docx-preview示例

本章节实现一个本地选择文件，并在线展示的示例，大致步骤如下：

选择一个docx的文件，并获取该文件；
文件转化成blob格式；
将Blob格式的数据流展示传入dox-preview中，并展示；

首先是第一步，Html部分如下，组件使用的是 IView 的 Upload组件，用 element 也一样，目的都是通过组件获得选择的文件

<Uploadactionname="file"id="file"multiple="multiple":auto-upload="false":before-upload="init"
><Button size="small" type="primary">点击上传</Button>
</Upload>

选择文件后读取该文件

 init(file) {var reader = new FileReader();reader.onload = (e) => {};// 传入一个参数对象即可得到基于该参数对象的文本内容reader.readAsDataURL(file);
},

第二步，读取文件数据，将其 转成Blob格式 的数据流

 let arr = e.target.result.split(",");
let data = window.atob(arr[1]);
let mime = arr[0].match(/:(.*?);/)[1];
let ia = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) {ia[i] = data.charCodeAt(i);
}
const blob = new Blob([ia], { type: mime });
console.log(blob);

第三步，塞进 docx-preview 中进行展示

docx.renderAsync(blob, this.$refs.demoDocContainer).then((x) => {console.log(x);}
); // 渲染到页面

即可完成展示，效果如下：

完整代码如下

<template><div id="app"><Uploadactionname="file"id="file"multiple="multiple":auto-upload="false":before-upload="init"><Button size="small" type="primary">点击上传</Button></Upload><div class="doc-preview" ref="demoDocContainer">1</div></div>
</template>
<script>
let docx = require("docx-preview");
export default {name: "docx-demo",methods: {init(file) {var reader = new FileReader();reader.onload = (e) => {let arr = e.target.result.split(",");let data = window.atob(arr[1]);let mime = arr[0].match(/:(.*?);/)[1];let ia = new Uint8Array(data.length);for (var i = 0; i < data.length; i++) {ia[i] = data.charCodeAt(i);}const blob = new Blob([ia], { type: mime });docx.renderAsync(blob, this.$refs.demoDocContainer).then((x) => {console.log(x);}); // 渲染到页面};// 传入一个参数对象即可得到基于该参数对象的文本内容reader.readAsDataURL(file);},},
};
</script>
<style lang="less">
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}
.doc-preview {width: 100%;height: 800px;background-color: #f5f5f5;
}
</style>

错误处理

在使用的使用遇到一个错误，如下

后来发现原因是选择的文件格式是 doc格式 的，因此无法被识别，特此在强调一下，该组件只能识别docx格式，不支持识别doc格式的word；

doc格式识别

如果一定要识别doc格式的文件，那么 纯前端应该是不行的了（主要是个人没找到合适的办法，如果有大佬研究过着一块，麻烦留言告知，万分感谢），因此不管是下面哪种方法需要后台配合，大致方法有以下这种；

转PDF格式

如题，把doc格式的文件传递给后台，后台取到后将其转换格式，转成PDF格式，之后就方便了，前台可以通过类似于 pdfjs 等工具库进行前台展示，pdfjs官网如下：https://mozilla.github.io/pdf.js/，具体用法可以自行官网查看，
下载的话可以在官网下载，也可以在npm上进行安装

当然，除了pdfjs，还有一种，就是通过 iframe 进行展示，这种方法更简单，不过稍微原始了点，并且说实话，到了现在 Iframe 并不被w3c所推荐了，但是很多时候确实好用，比如现在，用法如下

<iframe :src="url"></iframe>

url为该文件在后台的地址，由于iframe的特性，可以直接在区域内显示路径显示的文件…

小结

如果不需要识别doc文件，建议使用 docx-preview 进行在线预览，如果 一定要兼容doc，建议转成PDF格式后，通过 pdfjs 或者 Iframe 等库文件进行预览；

前端实现在线预览Word文件相关推荐

php怎么在线预览word文件？php预览.doc、.docx、.wps文件
php预览Word PHP要实现在线Word预览只需要3步第一步: 准备一个文件地址,如下: http://usdoc.cn/vw/文件模板.docx 第二步预览前置地址: http://vw.u ...
vue 在线预览word文件docx
1.npm安装插件 npm i docx-preview 2.index.html文件引入 <script src="https://unpkg.com/jszip/dist/jszi ...
word转pdf 转swf 实现在线预览word文件功能
# ifconfig -- 查看下虚拟机的ip地址之后下面的操作都是在本地软件进行连接 -- 将我给的压缩包文件全部上传到 /root 目录下 # yum -y update # i ...
在线浏览pdf doc html,前端实现在线预览pdf、word、xls、ppt等文件
1.前端实现pdf文件在线预览功能方式一: 通过a标签href属性实现 pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签hr ...
前端页面预览word_详解html实现在线预览word、excel、pdf等文件的功能（附代码）_WEB前端开发...
JavaScript判断"字典"为空的方法_WEB前端开发字典是一种存储键值对的数据结构,Javascript中的Object类内部即实现为一个字典,本文就来为大家介绍一下判断字 ...
前端在线预览word,excel,pdf
前端在线预览word,excel,pdf 预览Word 预览pdf 预览Excel 预览Word 微软的在线预览功能,可以预览word.ppt.Excel.PDF 局限: 需要外网能访问文件,如果是只 ...
【前端实现在线预览ppt、word、xls、pdf、视频】
前端实现在线预览ppt.word.xls.pdf.视频一. 预览ppt.word.xls 注意:无法打开文档? 二. pdf 三. 视频预览一. 预览ppt.word.xls 转载地址: http ...
office在线预览 word在线预览 .net在线预览文件在线浏览接口
office在线预览 word在线预览 excel在线预览文件浏览接口服务支持移动端浏览,只要能使用浏览器上网都可以使用,不需要安装任何第三方工具. 1.word在线预览 excel在线预览,.n ...
mvc直接在html页面预览pdf,Asp.net MVC 实现在线预览word、excel、ppt、pdf文件
在线预览word.excel.ppt 原理:主要是引用第三方Dll使本地word.excel.ppt文件转换成Html 需要引用 : Aspose.Cells.dll Aspose.Slides.dl ...
前端页面预览word_前端实现在线预览文档
前端实现在线预览文档发布时间:2019-06-03 17:22, 浏览次数:529 <>前端实现在线预览文档最近项目开发中需要实现在线预览Word,Excel,PowerPoint格式 ...

前端实现在线预览Word文件

简介