前端移动端页面内嵌套某个div在线预览PDF/EXCEL/WORD/TXT

#前端移动端页面内嵌套某个div在线预览PDF/EXCEL/WORD/TXT| 来源: 网络整理| 查看: 265

说明，一下方法不足之处在于，不支持.xls、.doc这种微软1997-2003 版本的格式，如果你有可以处理的，还请跟我说一下。

本文章不提供npm导入包方法！如需npm导入，可根据包名去导入

一、txt

txt文本最简单，无需引入任何包，用javascript内部提供的FileReader模块即可；

代码如下：

// url 文件的远程地址 // _this.$refs.txt是vue页面用于预览txt文本内容，放置的div showTxt(url) { let _this = this let xhr = new XMLHttpRequest() xhr.open('get', url, true) xhr.responseType = 'blob'; xhr.onload = () => { if(xhr.status == 200) { const reader = new FileReader() reader.onload = function () { if(_this.$refs.txt) { _this.$refs.txt.innerText = reader.result } } reader.readAsText(xhr.response); } } xhr.send(); },

二、PDF

网络上提及最多的方式是pdfjs，然后这个包似乎不支持移动端（我尝试了，没成功）

我用的是pdfh5.js（内部也是基于pdf.js的）

// 这些文件需去pdfh5的github下载 // #pdf是需要在id为pdf的div中预览 this.pdfh5 = null; this.pdfh5 = new Pdfh5("#pdf", { pdfurl: url, // 此处还可以有很多的options配置，自行去网上找 }); // 这个on监听可有可无，主要是看文件的信息和是否成功 this.pdfh5.on("complete", function (status, msg, time) { console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒") }) // 注意：在移动端预览的时候，可能会出现pdf并未铺满整个div // options配置中有个scale的属性，但是我配置了并没有实现铺满整个div // 我的解决办法是div的高度用的100%,然后设置zoom:1.5

三、word(仅支持.docx，不支持.doc)

word文件的预览，我用的是docx-preview

// docx-preview.min.js需在docx-preview的github中下载 // this.$refs.docx是vue页面中用于装载预览文件的div showWord(url) { var xhr = new XMLHttpRequest() xhr.open('get', url, true) xhr.responseType = 'blob' xhr.onload = (e) => { if(xhr.status == 200) { docx.renderAsync(xhr.response,this.$refs.docx) } } xhr.send(); },

四、Excel（只支持.xlsx，不支持.xls）

我有两个方案，如果excel中可能带图片之类的，需要编辑什么的，用方案一，缺点：性能差。

如果没有图片，无需编辑，要求滑动不卡顿，用方案二

方案一：luckysheet + luckyexcel

// url是远程地址 name文件名 var xhr = new XMLHttpRequest() xhr.open('get', url, true) xhr.responseType = 'arraybuffer' let _this = this xhr.onload = (e) => { if(xhr.status == 200) { const blob = new Blob([xhr.response]); const file = new File([blob], name); luckysheet.destroy(); // 先销毁当前容器 LuckyExcel.transformExcelToLucky(file, exportJson => { if (exportJson.sheets === null || !exportJson.sheets.length) { this.$message.error('无法读取excel文件的内容，当前不支持xls文件！'); return; } luckysheet.create({ // 把excel文件内容展示在id为luckysheet的div中 container: 'luckysheet', showinfobar: false, lang: 'zh', data: exportJson.sheets, title: exportJson.info.name, userInfo: exportJson.info.name.creator }); }); } } xhr.send(); },

方案二：xlsx

// _this.$refs.excel vue页面中ref="excel"用于装载excel预览文件的div var xhr = new XMLHttpRequest() xhr.open('get', url, true) xhr.responseType = 'arraybuffer' let _this = this xhr.onload = (e) => { if(xhr.status == 200) { let data = new Uint8Array(xhr.response); let workbook = XLSX.read(data, {type: 'array'}); let sheetName = workbook.SheetNames let innerHTML = '' // 遍历多个表 for (let i in sheetName) { let sheet = workbook.Sheets[sheetName[i]] innerHTML += XLSX.utils.sheet_to_html(sheet) } _this.$nextTick(() => { _this.$refs.excel.innerHTML = innerHTML }) } } xhr.send(); },

【本文地址】

公司简介

联系我们

前端 移动端 页面内嵌套某个div在线预览PDF/EXCEL/WORD/TXT

前端移动端页面内嵌套某个div在线预览PDF/EXCEL/WORD/TXT