Vue中如何实现在线预览word文件、excel文件_vue.js_

npm install --save mammoth

import mammoth from "mammoth";

data() { return { vHtml: "", wordURL:'' //文件地址，看你对应怎末获取、赋值 }; }, created() { // 具体函数调用位置根据情况而定 this.readExcelFromRemoteFile(this.wordURL); } methods：{ // 在线查看word文件 readExcelFromRemoteFile: function (url) { var vm = this; var xhr = new XMLHttpRequest(); xhr.open("get", url, true); xhr.responseType = "arraybuffer"; xhr.onload = function () { if (xhr.status == 200) { mammoth .convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }) .then(function (resultObject) { vm.$nextTick(() => { // document.querySelector("#wordView").innerHTML = // resultObject.value; vm.vHtml = resultObject.value; }); }); } }; xhr.send(); }, } 

npm install --save xlsx

import XLSX from "xlsx";

data() { return { excelData: [], workbook: {}, excelURL: "", //文件地址，看你对应怎末获取、赋值 }; }, created() { // 具体函数调用位置根据情况而定 this.readWorkbookFromRemoteFile(this.wordURL); } methods：{ // 在线查看excel文件 readWorkbookFromRemoteFile: function (url) { var xhr = new XMLHttpRequest(); xhr.open("get", url, true); xhr.responseType = "arraybuffer"; let _this = this; xhr.onload = function (e) { if (xhr.status === 200) { var data = new Uint8Array(xhr.response); var workbook = XLSX.read(data, { type: "array" }); console.log("workbook", workbook); var sheetNames = workbook.SheetNames; // 工作表名称集合 _this.workbook = workbook; _this.getTable(sheetNames[0]); } }; xhr.send(); }, getTable(sheetName) { console.log(sheetName); var worksheet = this.workbook.Sheets[sheetName]; this.excelData = XLSX.utils.sheet_to_json(worksheet); console.log(this.excelData); }, } 

data() { return { // 显示word excel vHtml: "", wordURL: "", isWord: "", fileType: "", // 1 word(.docx .doc) 2 excel(.xlsx .xsl) 3 其他() excelData: [], workbook: {}, excelURL: "", //文件地址，看你对应怎末获取、赋值 }; }, methods：{ // 查看详情=列表操作 // 查看 handleDetail(row) { console.log(row, "查看row"); this.tzOpen = true; this.detailForm = row; if (row.suffix === "docx" || row.suffix === "doc") { // this.fileType = 1; this.isWord = 1; // this.wordURL = row.url; this.readExcelFromRemoteFile(row.url); } else if (row.suffix === "xlsx" || row.suffix === "xls") { // this.fileType = 2; this.isWord = 0; // this.excelURL = row.url; this.readWorkbookFromRemoteFile(row.url); } }, // 在线查看excel文件 readWorkbookFromRemoteFile: function (url) { var xhr = new XMLHttpRequest(); xhr.open("get", url, true); xhr.responseType = "arraybuffer"; let _this = this; xhr.onload = function (e) { if (xhr.status === 200) { var data = new Uint8Array(xhr.response); var workbook = XLSX.read(data, { type: "array" }); console.log("workbook", workbook); var sheetNames = workbook.SheetNames; // 工作表名称集合 _this.workbook = workbook; _this.getTable(sheetNames[0]); } }; xhr.send(); }, // 在线查看word文件 readExcelFromRemoteFile: function (url) { var vm = this; var xhr = new XMLHttpRequest(); xhr.open("get", url, true); xhr.responseType = "arraybuffer"; xhr.onload = function () { if (xhr.status == 200) { mammoth .convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) }) .then(function (resultObject) { vm.$nextTick(() => { // document.querySelector("#wordView").innerHTML = // resultObject.value; vm.vHtml = resultObject.value; }); }); } }; xhr.send(); }, getTable(sheetName) { console.log(sheetName); var worksheet = this.workbook.Sheets[sheetName]; this.excelData = XLSX.utils.sheet_to_json(worksheet); console.log(this.excelData); }, } #table { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; margin-top: 60px; border: 1px solid #ebebeb; padding: 20px; width: 100%; margin: 20px auto; // border-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), // 0 2px 4px 0 rgba(232, 237, 250, 0.5); border-radius: 10px; // overflow: scroll; height: 100%; .tab { margin: 0 0 20px 0; display: flex; flex-direction: row; } }