穹拓网站建设,vps主机上新增网站,单位网站 单位网页 区别,企业解决方案公司排名需求
弹窗预览word文件#xff0c;因浏览器无法直接根据blob路径直接预览word文件#xff0c;所以需要利用插件实现。
解决方案
利用docx-preview实现word文件弹窗预览#xff0c;以node版本16.21.3和docx-preview版本0.1.8为例
具体实现步骤
1、安装docx-preview插件 …需求
弹窗预览word文件因浏览器无法直接根据blob路径直接预览word文件所以需要利用插件实现。
解决方案
利用docx-preview实现word文件弹窗预览以node版本16.21.3和docx-preview版本0.1.8为例
具体实现步骤
1、安装docx-preview插件
npm install docx-preview0.1.8 --save2、创建弹窗组件给一个空div绑定id为container !-- 预览弹窗 --div classpreviewDialogel-dialog:visible.syncdialogVisiblewidth90%:fullscreendialogFullScreendiv slottitle classdialog-header-titlediv classtitle-text文件预览/div/divdiv idcontainer stylewidth: 100%;/div/el-dialog/div3、引入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 classfile-preview clickpreviewFile文件预览 i classel-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
