【Vue项目实践】实现在线预览word文件、excel文件(1)

2401_84092903

1553人浏览 · 2024-05-07 08:46:53

2401_84092903 · 2024-05-07 08:46:53 发布

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

=========



1.引用sheetjs

===========



（1）安装 npm install --save xlsx

npm install --save xlsx




（2）引入 import XLSX from "xlsx";

import XLSX from “xlsx”;




2.页面布局

------

<el-table :data="excelData" style="width: 100%">

  <el-table-column

     v-for="(value, key, index) in excelData[2]"

     :key="index"

      :prop="key"

      :label="key"

  ></el-table-column>

 </el-table>




3. 请求URL显示数据

------------

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

},

}




三、项目应用：根据详情后缀分情况显示word、excel

============================



1\. 效果展示

========



![](https://img-blog.csdnimg.cn/76734443fb9c42f4a8b5ab824109a036.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP55m9UmFjaGVs,size_20,color_FFFFFF,t_70,g_se,x_16)



场景说明： 点击查看按钮，吊起弹框展示数据



2\. 页面布局

--------

 <el-table :data="excelData" style="width: 100%">

    <el-table-column

        v-for="(value, key, index) in excelData[2]"

        :key="index"

        :prop="key"

        :label="key"

     ></el-table-column>

 </el-table>




 3.调用函数展示数据

-----------



根据row中文件后缀判断使用哪种形式

data() {

return {

// 显示word excel

vHtml: "",

wordURL: "",

isWord: "",

fileType: "", // 1 word(.docx .doc) 2 excel(.xlsx .xsl) 3 其他()

excelData: [],

workbook: {},

excelURL: "", //文件地址，看你对应怎末获取、赋值

};

methods：{

// 查看详情=列表操作

// <el-button type=“text” @click=“handleDetail(scope.row)” v-if=“!scope.row.havePassword”>查看

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

},