vue2实现word在线预览

embedded/2024/12/23 22:45:48/

实现附件在线预览是一个很常用的功能,这次正好碰到这样的需求,记录一下自己实现的过程。

首先是插件的选择,网上实现预览的方法主要有两种,一个是vue-office插件,另一个是docx-preivew插件。看网上其他网友的教程都能够实现文件的在线预览。

选择一:vue-office插件

vue-office官网地址:docx文件预览 | vue-office

不知道是不是因为自己vue版本太低不兼容这个插件,还是其他原因,按照方法怎么都实现不了文件的预览。(项目的vue版本是2.5.17,如果有遇到类似情况解决了的,欢迎指教)

选择二:docx-preivew插件

参考文章:docx-preview在vue内的使用_vue docx-preview-CSDN博客

第一种方式实现不了,就选择了第二种。第二个插件主要的问题就是版本的选择。一开始直接无脑操作根据命令(npm i docx-preview)安装插件:

结果出事了。我的vue版本过低,不能直接使用最新版本的docx-preivew插件。后面终于,在网上找到类似的问题,需要安装指定版本的插件,命令:

npm i docx-preview@0.1.20

有两种实现方法 :

一、上传文件进行预览

    <el-dialogtitle="文件预览":visible="dialogVisible"show-closeappend-to-bodywidth="60%":before-close="cancelDialog"><input type="file" @change="handleFileChange" /><div class="container" ref="container" id="container"></div><div slot="footer" class="dialog-footer tc"><button class="btn-submit btn-submit-sm" @click="cancelDialog()">关闭</button></div></el-dialog>
javascript">    async handleFileChange(e){const file = e.target.files[0];const blob = await this.fileToBlob(file);this.preview(blob,this.$refs.container,this.$refs.container);},fileToBlob(file) {return new Promise((resolve,) => {let reader = new FileReader();reader.readAsArrayBuffer(file);let blob = null;reader.onload = (e) => {if (typeof e.target.result === "object") {blob = new Blob([e.target.result]);} else {blob = e.target.result;}resolve(blob);};});},async preview(blob,createEl,styleEl) {await renderAsync(blob, // could be any type that supported by JSZip.loadAsynccreateEl, //element to render document content,styleEl, //element to render document styles, numbeings, fonts. If null, bodyContainer will be used.{className: "docx", //class name/prefix for default and document style classesinWrapper: true, //enables rendering of wrapper around document contentignoreWidth: false, //disables rendering width of pageignoreHeight: false, //disables rendering height of pageignoreFonts: false, //disables fonts renderingbreakPages: true, //enables page breaking on page breaksignoreLastRenderedPageBreak: true, //disables page breaking on lastRenderedPageBreak elementsexperimental: false, //enables experimental features (tab stops calculation)trimXmlDeclaration: true, //if true, xml declaration will be removed from xml documents before parsinguseBase64URL: false, //if true, images, fonts, etc. will be converted to base 64 URL, otherwise URL.createObjectURL is useduseMathMLPolyfill: false, //@deprecated includes MathML polyfills for chrome, edge, etc.renderChanges: false, //enables experimental rendering of document changes (inserions/deletions)renderHeaders: true, //enables headers renderingrenderFooters: true, //enables footers renderingrenderFootnotes: true, //enables footnotes renderingrenderEndnotes: true, //enables endnotes renderingdebug: false, //enables additional logging},);},

实现效果:

二、后端提供接口下载文件后预览 

javascript">    <el-button@click="toPreView($event, row)"type="text"class="pd-0 btn-table-wid2">预览</el-button><el-dialogtitle="文件预览":visible="dialogVisible"show-closeappend-to-bodywidth="60%":before-close="cancelDialog"><div class="container" ref="container" id="container"></div><div slot="footer" class="dialog-footer tc"><button class="btn-submit btn-submit-sm" @click="cancelDialog()">关闭</button></div></el-dialog>
javascript">  created() {this.previewFile(this.docId);},methods: {previewFile() {const inParam = {DOC_ID: this.docId,STAFF_NAME: this.$store.getters.staffName,SYS_USER_CODE: this.$store.getters.systemUserCode};this.$preview(this.mciApi.common.file.previewFile, {...inParam},false).then(r => {this.preview(r,this.$refs.container,this.$refs.container);})},async preview(blob,createEl,styleEl) {await renderAsync(blob, // could be any type that supported by JSZip.loadAsynccreateEl, //element to render document content,styleEl, //element to render document styles, numbeings, fonts. If null, bodyContainer will be used.{className: "docx", //class name/prefix for default and document style classesinWrapper: true, //enables rendering of wrapper around document contentignoreWidth: false, //disables rendering width of pageignoreHeight: false, //disables rendering height of pageignoreFonts: false, //disables fonts renderingbreakPages: true, //enables page breaking on page breaksignoreLastRenderedPageBreak: true, //disables page breaking on lastRenderedPageBreak elementsexperimental: false, //enables experimental features (tab stops calculation)trimXmlDeclaration: true, //if true, xml declaration will be removed from xml documents before parsinguseBase64URL: false, //if true, images, fonts, etc. will be converted to base 64 URL, otherwise URL.createObjectURL is useduseMathMLPolyfill: false, //@deprecated includes MathML polyfills for chrome, edge, etc.renderChanges: false, //enables experimental rendering of document changes (inserions/deletions)renderHeaders: true, //enables headers renderingrenderFooters: true, //enables footers renderingrenderFootnotes: true, //enables footnotes renderingrenderEndnotes: true, //enables endnotes renderingdebug: false, //enables additional logging},);},cancelDialog(){this.$emit('cancelDialog');},}

注意:

1、this.$preview 是封装的post请求方法,需要设置 responseType: 'blob'

2、this.mciApi.common.file.previewFile 是后台提供的文件下载接口,返回文件流数据,请求成功后将文件流转换成 blob 类型,进行文件预览。

3、blobconst blob = new Blob([content], { type: 'application/pdf' });

实现效果:


http://www.ppmy.cn/embedded/148183.html

相关文章

Spring(二)AOP、切入点表达式、AspecJ常用通知的类型、Spring中的事务管理

文章目录 一、AOP 1、定义 2、特点 3、AOP中的术语&#xff08;连接点、切入点、通知、目标、代理&#xff09; 4、配置 &#xff08;1&#xff09;下载AOP相关jar &#xff08;2&#xff09;启动AspectJ支持 5、使用 6、切入点表达式 7、AspecJ常用通知的类型 &…

DDR DRAM/UDIMM Clock DCD jitter分析

随着DDR系统运行速度的提高&#xff0c;不仅对DQ和DQS&#xff0c;而且对时钟和地址/控制信号的时序要求也变得非常具有挑战性。FPGA系统环境下&#xff0c;FPGA应根据客户需求支持不同的通道拓扑。如下图显示了一个DDR4分立SDRAM的示例配置&#xff0c;广泛用于减少系统的厚度…

Python连接MySQL数据库教程

目录 一、连接方法 二、pymysql模块用法 三、借助python运行sql语句 1、创建数据库连接对象 2、创建数据库操作对象 3、编写sql语句、执行sql语句 4、释放【关闭】与数据库的连接资源对象 总结 一、连接方法 要用Python连接数据库需要结束Python的外部库--pymysql&…

青少年编程与数学 02-004 Go语言Web编程 12课题、本地数据存储

青少年编程与数学 02-004 Go语言Web编程 12课题、本地数据存储 一、本地数据存储1. Cookies2. LocalStorage3. SessionStorage4. IndexedDB5. Web SQL实现客户端本地数据存储的示例注意事项 二、应用场景1. 用户偏好设置2. 表单数据保存3. 离线访问4. 购物车功能5. 游戏状态保存…

211-基于FMC的1路1.5G ADC 1路 2.5G DAC子卡

一、板卡概述 FMC-1AD-1DA-1SYNC是我司自主研发的一款1路1G AD采集、1路2.5G DA回放的FMC、1路AD同步信号子卡。板卡采用标准FMC子卡架构&#xff0c;可方便地与其他FMC板卡实现高速互联&#xff0c;可广泛用于高频模拟信号采集等领域。 二、功能介绍 2.1 原理框图 2.2 硬件…

联合物种分布模型(JSDM)与Hmsc包:群落生态学数据分析与预测技术

联合物种分布模型&#xff08;Joint Species Distribution Modelling&#xff0c;JSDM&#xff09;在生态学领域&#xff0c;特别是群落生态学中发展最为迅速&#xff0c;它在分析和解读群落生态数据的革命性和独特视角使其受到广大国内外学者的关注。在学界不同研究团队研发出…

Unity 上好用的插件

PlayerMaker BehaviorDesigner Cinemachine Timeline Hybrid Addressable AssetBundle Blower Simple Zoom 大地图上缩放和平移使用ScrollRect的好效果实现

ECharts柱状图-柱图37,附视频讲解与代码下载

引言&#xff1a; 在数据可视化的世界里&#xff0c;ECharts凭借其丰富的图表类型和强大的配置能力&#xff0c;成为了众多开发者的首选。今天&#xff0c;我将带大家一起实现一个柱状图图表&#xff0c;通过该图表我们可以直观地展示和分析数据。此外&#xff0c;我还将提供…