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

目录

• excel文件预览
• word文件预览
• pdf文件预览
• 一、查看word
• 引用mammoth.js
• 二、查看Excel
• 引用sheetjs
• 写的项目
• 1.页面
• 2.数据
• 补充：vue移动端实现word在线预览
• 总结

excel文件预览

word文件预览

pdf文件预览

一、查看word

引用mammoth.js

安装 npm install --save mammoth

引入import mammoth from “mammoth”;

1.页面

2.数据

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

二、查看Excel

引用sheetjs

安装 npm install --save xlsx

 引入import XLSX from “xlsx”;

1.页面

2.数据

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

写的项目

1.页面