在vue中，根据后端接口返回的文件流实现word文件弹窗预览

需求

弹窗预览word文件，因欣赏器无法直接根据blob路径直接预览word文件，以是必要使用插件实现。
办理方案

使用docx-preview实现word文件弹窗预览，以node版本16.21.3和docx-preview版本0.1.8为例
具体实现步调

1、安装docx-preview插件

1. npm install [email protected] --save

复制代码

2、创建弹窗组件，给一个空div绑定id为container

1.         <!-- 预览弹窗 -->
2.     <div class="previewDialog">
3.       <el-dialog
4.         :visible.sync="dialogVisible"
5.         width="90%"
6.         :fullscreen="dialogFullScreen"
7.       >
8.         <div slot="title" class="dialog-header-title">
9.           <div class="title-text">文件预览</div>
10.         </div>
11.         <div id="container" style="width: 100%;"></div>
12.       </el-dialog>
13.     </div>

复制代码

3、引入docx-preview和axios

1. import { renderAsync } from "docx-preview";

复制代码

4、在data中初始化界说docxOptions设置项

1. data() {
2.     return {
3.       docxOptions: {
4.         className: "docx", // string：默认和文档样式类的类名/前缀
5.         inWrapper: true, // boolean：启用围绕文档内容的包装器渲染
6.         ignoreWidth: false, // boolean：禁用页面的渲染宽度
7.         ignoreHeight: false, // boolean：禁止渲染页面高度
8.         ignoreFonts: false, // boolean：禁用字体渲染
9.         breakPages: true, // boolean：在分页符上启用分页
10.         ignoreLastRenderedPageBreak: true, // boolean：在lastRenderedPageBreak 元素上禁用分页
11.         experimental: false, // boolean：启用实验功能（制表符停止计算）
12.         trimXmlDeclaration: true, // boolean：如果为true，解析前会从​​ xmlTemplate 文档中移除 xmlTemplate 声明
13.         // useBase64URL: false, // boolean：如果为true，图片、字体等会转为base 64 URL，否则使用URL.createObjectURL
14.         // useMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。
15.         // showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）
16.         debug: false // boolean：启用额外的日志记录
17.       },
18.       dialogVisible: false,
19.     };
20.   },

复制代码

5、创建预览方法previewFile

1.         // 预览文件
2.     previewFile() {
3.       let timeId = "";
4.       document.getElementById("container") &&
5.         (document.getElementById("container").innerHTML = "");
6.       const options = {
7.         method: "get",
8.         headers: {
9.           Authorization: getToken()
10.         },
11.         url:
12.           process.env.VUE_APP_BASE_SERVER + `/stgFile/downloadFile/${timeId}`, // 可替换为你自己的后端下载地址
13.         responseType: "blob", // 二进制流
14.         params: {}
15.       };
16.       this.dialogVisible = true;
17.       axios(options)
18.         .then(res => {
19.           if (!res.data) return this.$message.warning("当前没有可预览文件");
20.           const docData = new Blob([res.data]);
21.           let bodyContainer = document.getElementById("container");
22.           renderAsync(
23.             docData, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
24.             bodyContainer, // HTMLElement 渲染文档内容的元素,
25.             null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 bodyContainer。
26.             this.docxOptions // 配置
27.           );
28.         })
29.         .catch(err => {
30.           return this.$message.error(err);
31.         });
32.     },

复制代码

5、在所需地方调用预览方法

1. <el-button primary class="file-preview" @click="previewFile">
2.      文件预览 <i class="el-icon-view"></i>
3. </el-button>

复制代码

备注

1. 以上则是预览word文件流的全部内容，有的同学在使用过程中可能会遇到安装docx-preview插件报错或者线上部署时报错，这个很大概率是因为你自己工程用到的node版本与docx-preview版本匹配不一致导致，可以去docx-preview官网查看对应版本，建议node16及以下版本尽量使用老一点的版本，16以上版本使用最新的docx-preview即可。
3. 不同版本的docx-preview使用方式有细微差异，可以查看官网各个版本的实例方法进行调试。

复制代码

docx-preview官网地点：https://www.npmjs.com/package/docx-preview