vue实现文件在线预览功能（包含docx,excel,pdf）
npm install--save @vue-office/docx @vue-office/excel @vue-office/pdf vue-demi或者
yarn add @vue-office/docx @vue-office/excel @vue-office/pdf vue-demi<template><a-card:bordered="false"><!--查询区域--><a-button type="link"size="small"@click="handlePreview2(record)">预览</a-button><a-modal destroyOnClose:visible="comShow":title="modalTitle":width="dynModelWidth":okButtonProps="{ class:{'jee-hidden': true} }"@cancel="handleCancel"><Watermark:text="watermarkText":opacity="0.3":fontSize="20":rotate="0"/><component:is="renderCom":src="url2"@rendered="rendered"@error="errorHandler"class="size-100"/></a-modal></a-card></template><script>// 引入VueOfficeDocx组件importVueOfficeDocxfrom"@vue-office/docx";// 引入相关样式import"@vue-office/docx/lib/index.css";// 引入VueOfficeExcel组件importVueOfficeExcelfrom"@vue-office/excel";// 引入相关样式import"@vue-office/excel/lib/index.css";// 引入VueOfficePdf组件importVueOfficePdffrom"@vue-office/pdf";exportdefault{name:'MesQualityFileListSearch',mixins:[JeecgListMixin,mixinDevice],components:{VueOfficeDocx,VueOfficeExcel,VueOfficePdf,},data(){return{dynModelWidth:'60%',modalTitle:'',comShow:false,renderCom:"VueOfficeDocx",url2:'',}},methods:{handlePreview2(record){this.getDetail(record.id)},handleCancel(){this.comShow=false;},rendered(){console.log("渲染完成");},errorHandler(){console.log("预览渲染失败，请重试");},/** * 根据文件扩展名渲染指定预览组件 * */getDetail(id){if(id){letparam={id:id,}getAction(this.url.queryDetail,param).then((res)=>{if(res.success){letfileArr=res.result.filesthis.comShow=true;this.dynModelWidth='80%',this.modalTitle=fileArr[0].fileNamethis.url2=fileArr[0].fileUrl console.log(this.url2)// 根据文件格式显示预览组件constfileExtension=fileArr[0].fileName.split(".").pop().toLowerCase();if(fileExtension==="xlsx"){this.renderCom="VueOfficeExcel";}if(fileExtension==="docx"){this.renderCom="VueOfficeDocx";}if(fileExtension==="pdf"){this.renderCom="VueOfficePdf";}}})}},}}</script><style scoped>@import'~@assets/less/common.less';.size-100{width:100%;height:100%;min-height:500px;}</style>