vue中使用docx-preview外掛預覽word文件(後端express)

語言: CN / TW / HK

theme: mk-cute highlight: a11y-dark


問題描述

本文記錄了一下預覽word文件的功能。需要用到: - 前端:vue - 後端:express - 外掛:docx-preview

思路分析

  1. 後端express程式碼中讀取資料夾中的 .docx 型別檔案
  2. 然後將其以可讀流的方式返回給前端一個blob流檔案
  3. 後端返回的流檔案前端收到以後,執行docx-preview外掛的renderAsync方法即可渲染出預覽的效果

我們先看一下效果圖

效果圖

GIF 2021-11-24 10-22-13.gif

程式碼

後端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程式碼中,直接複製貼上執行即可

總結

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