vue 前端根据url在线预览pdf、docx、xlsx、txt、html文件(vue页面获取url参数)

编辑：rootadmin

vue 前端根据url在线预览pdf、docx、xlsx、txt、html文件一、pdf通过pdf.js实现

推荐整理分享vue 前端根据url在线预览pdf、docx、xlsx、txt、html文件(vue页面获取url参数)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue请求url,vue页面获取url参数,vue页面获取url参数,vue url-loader,vue通过url访问单个页面,vue url-loader,vue前端怎么调用接口代码,vue url#,内容如对您有帮助，希望把文章链接给更多的朋友！

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

注：使用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) },

本文链接地址:https://www.jiuchutong.com/zhishi/278004.html 转载请保留说明！

上一篇：在Linux中安装是使用系统性能监控软件Nmon(linux安装方式有)

下一篇：microsoft.exe进程查询 microsoft进程是什么意思作用是什么(office进程)