vue中使用docx-preview插件預覽word文檔(後端express)
theme: mk-cute highlight: a11y-dark
問題描述
本文記錄了一下預覽word文檔的功能。需要用到:
- 前端:vue
- 後端:express
- 插件:docx-preview
思路分析
- 後端express代碼中讀取文件夾中的
.docx
類型文件 - 然後將其以可讀流的方式返回給前端一個
blob
流文件 - 後端返回的流文件前端收到以後,執行
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代碼中,直接複製粘貼運行即可
總結
好記性不如爛筆頭,如果幫到了您,歡迎動動您的小手點個讚唄 ^_^
「其他文章」
- vue中使用docx-preview插件預覽word文檔(後端express)
- react組件通信方式之~圖解父子組件通信和兄弟組件通信pubsub-js
- 解決react警吿:findDOMNode is deprecated in StrictMode. findDOMNode was passed an...
- vue自定義指令使用~以仿寫v-show和實現v-copy為例講解
- el-table表頭文字換行的三種方式
- elementUI時間日期選擇器更改小圖標的位置和icon
- 兩種方式解決頁面刷新vuex中數據丟失問題(詳細講解)
- vue組件的遞歸自調用~代碼思路分析
- el-tree樹組件的懶加載寫法步驟