方式.常規(guī)預覽：

圖片，視頻，pdf,頁面等常規(guī)文件，直接用iframe標簽就行了，但是word,ppt,exl等文件在iframe下直接下載下來，這個和預期的功能不符合，所以，我們需要對word,ppt,exl等文件進行處理,下面是獲取文件后綴名的方法 //后綴名判斷 getFileExtendingName (filename) {// 文件擴展名匹配正則var reg = /\.[^\.]+$/;var matches = reg.exec(filename);if (matches) {return matches[0];}return '';},

方式2.kkFileView

kkFileView開源在線預覽文件，這個方法是開源的，在文件較大的情況下，加載速度比價慢

kkFileView官網(wǎng)文檔：https://kkfileview.keking.cn/zh-cn/docs/production.html

template中

<iframe :src="previewUrl" class="iframe_left" v-show="flieShow" frameborder="0"></iframe>

js代碼

//在main.js文件下配置全局文件地址，地址是調(diào)用的后端的本機地址，端口8012不需要改 Vue.prototype.$wordUrl="http://*******:8012" //ressss 是要預覽的文件地址 //this.previewUrl 是定義在iframe標簽上的路徑， this.previewUrl=this.$wordUrl+'/onlinePreview?url='+encodeURIComponent(BASE64.encode(ressss))

方式3.docx-preview

此方法只針對word文檔，相對于kkFileView的好處是，速度要比使用kkFileView快很多

安裝依賴

npm i docx-preview --save

在組件中script最開始引入

// 引入docx-preview插件 let docx = require("docx-preview");

當文件后綴為.docx時，執(zhí)行方法

//查看word文件//e為文件地址Checkdocx(e){this.$axios.post("*******",{location:e},{responseType: "blob"}).then(({data})=>{docx.renderAsync(data, this.$refs.file); })},

html代碼

<div class="iframe_left" ref="file"></div>

方式4.文件轉(zhuǎn)ptf

此方法的思路就是傳文件路徑給后端，后端轉(zhuǎn)成ptf后返回pft路徑，在預覽之后調(diào)用刪除接口在刪除ptf,因為ptf在iframe標簽中可以直接展示。

總結(jié)

以上是生活随笔為你收集整理的vue项目,内网预览.xls .pptx .ppt .doc .docx .xlsx等格式的文件方法推荐的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。