vue在线预览word、excel、pdf、txt、图片的方法实例_vue.js_

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(); }, } 

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); }, }