太原网站建设 网站制作,wordpress3.9主题,网站推广和优化系统,河南省造价信息网官网一、仅需实现在线预览#xff0c;且文件地址公网可访问 #xff08;一#xff09;微软office免费预览#xff08;推荐#xff09; 支持doc/docx/xls/xlsx/ppt/pptx等多种office文件格式的免费预览 //示例代码//​在https://view.officeapps.live.com/op/view.aspx?src…一、仅需实现在线预览且文件地址公网可访问 一微软office免费预览推荐 支持doc/docx/xls/xlsx/ppt/pptx等多种office文件格式的免费预览 //示例代码//​在https://view.officeapps.live.com/op/view.aspx?src后面拼接需要预览的地址如下\let urlhttp://xxx.com/files/demo.doc window.open(​https://view.officeapps.live.com/op/view.aspx?srcencodeURIComponent(​url))二XDOC文档预览云服务 移动端和PC端无插件预览PDF、OFD、Word、WPS等多种格式文档 //示例let urlhttp://xxx.com/files/demo.docwindow.open(https://view.xdocin.com/view?src encodeURIComponent(url)) 二、本地及非公网文件在线预览 本地或内网预览需要借助插件实现pdf、mp3、mp4等主要靠原生标签或浏览器自带功能尽量减少了插件的安装 一pdf、txt 直接使用ifrem嵌入页面用浏览器自带预览功能满足基本需求其他也可以试试vue-office的pdf插件 pdf预览效果 txt预览效果 二mp3、mp4 使用原生audio和video标签能满足基本需求如有其他功能的需要可以使用video.js等插件 mp3预览效果 mp4预览效果 三docx、xlsx vue-office/docx和vue-office/excel对docx和xlsx文件预览个人感觉实现上更方便更多实现方式也可自行查询案例很多此处就不再列出示例代码 docx预览效果 xlsx预览效果 pdf/txt/mp3/mp4/docx/xlsx及图片示例代码 templatedivel-button clickgetSrc点击获取后台文件并预览/el-buttoninput typefile changeuploadFile($event) /!-- pdf/text --iframe v-if[pdf, text].includes(type) :srcsrc/iframe!-- mp3、ogg、wav --audiov-if[mp3, ogg, wav].includes(type)controls:srcsrc/audio!-- mp4、webm、ogv --videov-if[mp4, webm, ogv].includes(type)controls:srcsrc/video!-- docx --vue-office-docxv-iftype docx:srcsrcrenderedfileRenderederrorfileError/!-- xlsx --vue-office-excelv-iftype xlsx:srcsrcrenderedfileRenderederrorfileError/!-- 图片 --img v-if[jpg, png].includes(type) :srcsrc /!-- doc --!-- doc等格式文件的预览需要后台处理成html后使用vue自带v-html进行展示 --!-- div classdocHtml v-htmlhtml/div --/div /templatescript langts setup import { ref } from vue; import { getImgPath } from /api/testApi; import VueOfficeDocx from vue-office/docx; //引入docx预览插件 import vue-office/docx/lib/index.css; //docx预览插件样式 import VueOfficeExcel from vue-office/excel; //引入excel预览插件 import vue-office/excel/lib/index.css; //引入excel预览插件样式const src ref(); const type ref(); // 获取后台文件根据实际接口处理数据 const getSrc async () {await getImgPath().then((res: any) {let imgBlob new Blob([res]);src.value URL.createObjectURL(imgBlob);}); }; // 本地上传的文件 const uploadFile (ev: any) {let file ev.target.files[0];if (file.name) {src.value URL.createObjectURL(file);} }; // vueOffice渲染完成的回调 const fileRendered (e: any) {console.log(渲染完成了, e); };// vueOffice渲染出错的回调 const fileError (e: any) {console.log(渲染出错了, e); }; /scriptstyle langscss scoped /style 三pptx pptx预览使用的是pptx.js文件 1.在pptx.js官网下载压缩包 PPTXjshttps://pptx.js.org/index.html 1进入官网点击下载按钮 2选择版本下载 2.在public文件夹中添加pptxjs依赖文件 3.在index.html中引入 link relstylesheet href/PPTXjs/css/pptxjs.css /link relstylesheet href/PPTXjs/css/nv.d3.min.css /!-- for charts graphs --scripttypetext/javascriptsrc/PPTXjs/js/jquery-1.11.3.min.js/scriptscript typetext/javascript src/PPTXjs/js/jszip.min.js/script!-- v2.. , NOT v.3.. --script typetext/javascript src/PPTXjs/js/filereader.js/script!--https://github.com/meshesha/filereader.js --script typetext/javascript src/PPTXjs/js/d3.min.js/script!-- for charts graphs --script typetext/javascript src/PPTXjs/js/nv.d3.min.js/script!-- for charts graphs --script typetext/javascript src/PPTXjs/js/pptxjs.js/scriptscript typetext/javascript src/PPTXjs/js/divs2slides.js/script!-- for slide show -- 4.在页面中使用  templatediv idpptx/div /templatescript langts setup const pptxShow (src: any) {nextTick(() {$(#pptx).pptxToHtml({pptxFileUrl: src, //pptx文件地址slidesScale: 100%,});}); /scriptstyle langscss scoped /style pptx预览效果 pptx预览时注意页面报Uncaught (in promise) TypeError: $(...).pptxToHtml is not a function的错误检查在index.html中引入的jequry版本是否与项目中其他地方使用的版本冲突导致选择保留一个版本即可。 如果以上内容对你有帮助就点个赞加入收藏吧~~