在vue中,根据后端接口返回的文件流实现word文件弹窗预览
需求
弹窗预览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