当前位置：首页 > news >正文

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

news 2025/6/28 14:47:49

需求

弹窗预览word文件，因浏览器无法直接根据blob路径直接预览word文件，所以需要利用插件实现。

解决方案

利用docx-preview实现word文件弹窗预览，以node版本16.21.3和docx-preview版本0.1.8为例

具体实现步骤

1、安装docx-preview插件

npm install docx-preview@0.1.8 --save

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

	<!-- 预览弹窗 --><div class="previewDialog"><el-dialog:visible.sync="dialogVisible"width="90%":fullscreen="dialogFullScreen"><div slot="title" class="dialog-header-title"><div class="title-text">文件预览</div></div><div id="container" style="width: 100%;"></div></el-dialog></div>

3、引入docx-preview和axios

import { renderAsync } from "docx-preview";

4、在data中初始化定义docxOptions配置项

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

5、创建预览方法previewFile

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

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

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

备注

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

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

查看全文

http://www.lryc.cn/news/492220.html