vue 前端根据url在线预览pdf、docx、xlsx、txt、html文件

一、pdf

通过pdf.js实现

1、下载pdf.js文件夹；
http://mozilla.github.io/pdf.js/
2、将下载的文件拉进项目中；
详见：https://blog.csdn.net/m0_56415970/article/details/124316169
3、iframe

<iframe
    id="iframe":src="url"
     frameborder="0"></iframe>

return'web/viewer.html?file='+this.pdfUrl

注：
使用pdf.js时，当有跨域的问题时，会加载失败，错误信息为：
file origin does not match viewer’s。

注释掉web/viewer.js中的这几行，不去判断跨域即可。

if(origin !== viewerOrigin && protocol !=='blob:'){thrownewError('file origin does not match viewer\'s');}

禁掉这三行。

二、docx

通过插件docx-preview实现

1、安装：

npm i docx-preview --save

2、vue文件中引入：

var docx = require("docx-preview");

3、使用

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

axios({method:'get',responseType:'blob',// 设置响应文件格式url:this.url,//后端获取到的文件url}).then(({ data })=>{
          docx.renderAsync(data,this.$refs.file)// 渲染到页面预览})

三、xlsx

1、安装：

npm i xlsx --save

2、vue文件中引入：

let XLSX = require('xlsx')

3、使用

<div v-html="tableau"></div>

axios
.get(this.url,{responseType:'arraybuffer',// 设置响应体类型arraybuffer}).then(({ data })=>{let workbook =XLSX.read(newUint8Array(data),{type:'array'})// 解析数据let worksheet = workbook.Sheets[workbook.SheetNames[0]]// workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表this.tableau =XLSX.utils.sheet_to_html(worksheet)// 渲染})

四、txt和html文件

//txt<div class="txtSty">{{ txt }}</div>//html<div v-html="htmlText"class="htmlSty"></div>

loadTxtOrHtml(url,num){var xh = window.Event ?newXMLHttpRequest():newwindow.ActiveXObject('Microsoft.XMLHTTP')
            xh.open('GET', url,true)//这里改变编码格式，如果是txt格式，则为gb2312，如果是html格式，则为utf-8let code = num =='3'?'gb2312':'utf-8'if(window.Event) xh.overrideMimeType('text/xml;charset='+ code)
            xh.onreadystatechange=()=>{if(xh.readyState !=4)returnvar v
                v = window.Event ? xh.responseText : window.gb2utf8(xh.responseBody)this.txt = v//txt文件内容this.htmlText = v//html文件内容}
            window.gb2utf8=(data)=>{var glbEncode =[],
                    t,
                    i,
                    j,
                    len
                var gb2utf8_data = data
                window.execScript("gb2utf8_data = MidB(gb2utf8_data, 1)+' '",'vbscript')
                t =escape(gb2utf8_data).replace(/%u/g,'').replace(/(.{2})(.{2})/g,'%$2%$1').replace(/%([A-Z].)%(.{2})/g,'@$1$2')
                t = t.split('@')
                i =0
                len = t.length
                while(++i < len){
                    j = t[i].substring(0,4)if(!glbEncode[j]){var gb2utf8_char =eval('0x'+ j)
                        window.execScript('gb2utf8_char=Chr(gb2utf8_char)','vbscript')
                        glbEncode[j]=escape(gb2utf8_char).substring(1,6)}
                    t[i]= glbEncode[j]+ t[i].substring(4)}
                gb2utf8_data = gb2utf8_char =nullreturnunescape(t.join('%')).slice(0,-1)}
            xh.send(null)},