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:') {
    throw new Error('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(new Uint8Array(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 ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft.XMLHTTP')
            xh.open('GET', url, true)
            //这里改变编码格式，如果是txt格式，则为gb2312，如果是html格式，则为utf-8
            let code = num == '3'? 'gb2312':'utf-8'
            if (window.Event) xh.overrideMimeType('text/xml;charset='+ code)
            xh.onreadystatechange = ()=> {
                if (xh.readyState != 4) return
                var 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 = null
                return unescape(t.join('%')).slice(0, -1)
            }
            xh.send(null)
        },