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代碼中，直接複製粘貼運行即可

總結

好記性不如爛筆頭，如果幫到了您，歡迎動動您的小手點個讚唄 ^_^