vue中使用docx-preview插件预览word文档（后端express）

---

theme: mk-cute highlight: a11y-dark

---

问题描述

本文记录了一下预览word文档的功能。需要用到： - 前端：vue - 后端：express - 插件：docx-preview

思路分析

1. 后端express代码中读取文件夹中的 .docx 类型文件
2. 然后将其以可读流的方式返回给前端一个blob流文件
3. 后端返回的流文件前端收到以后，执行docx-preview插件的renderAsync方法即可渲染出预览的效果

我们先看一下效果图

效果图

代码

后端express代码

```js // 引入文件模块 const fs = require("fs")

// 返回word文件接口 route.get('/getDoc', (req, res) => {

// 假设我们的word文档文件就存放在这个doc目录里面   let docxUrl = './doc/出师表.docx'

// 允许跨域   res.header("Access-Control-Allow-Origin", "*");

// 设置请求头   res.writeHead(200, {     // 指定文件类型为docx     'Content-Type': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',   })

//创建可读流   let readStream = fs.createReadStream(docxUrl)

// 将读取的结果以管道pipe流的方式返回给前端   readStream.pipe(res);

}) ```

前端vue代码

注意，vue项目要先下载插件哦

cnpm i docx-preview --save

```js

``` 为了方便大家调试效果，所以后端接口我也提供了一份，大家如果不想写node接口直接用我的即可，接口在上述vue代码中，直接复制粘贴运行即可

总结

好记性不如烂笔头，如果帮到了您，欢迎动动您的小手点个赞呗 ^_^