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

1. 效果展示

2. 页面布局

3.调用函数展示数据

实现效果：

 一、查看word

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

1.引用mammoth.js

（1）安装 npm install --save mammoth

npm install --save mammoth

（2）引入import mammoth from “mammoth”;

import mammoth from "mammoth";

2. 页面布局

<!-- word查看详情 -->

<div id="wordView" v-html="vHtml"/></div>

3. 请求URL显示数据

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

=========

1.引用sheetjs

===========

（1）安装 npm install --save xlsx

npm install --save xlsx

（2）引入 import XLSX from “xlsx”;

import XLSX from "xlsx";

2.页面布局

<!-- excel查看详情 -->

  <div id="table" v-if="!isWord">

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

 </div>

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. 效果展示

========

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

2. 页面布局

<div :style="'border:1px dashed;width:100%;height:300px;overflow:scroll'">

  <!-- word查看详情 -->

  <div id="wordView" v-html="vHtml" v-if="isWord" />

  <!-- excel查看详情 -->

  <div id="table" v-if="!isWord">

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

  </div>

  <!-- <div v-else></div> -->

</div>

3.调用函数展示数据

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

### 最后

![](https://img-blog.csdnimg.cn/img_convert/4c258d2bd1829d455d8cb753a9b0ef6c.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/532abdb6ad74247fea2602a34360fc78.webp?x-oss-process=image/format,png)

**资料过多，篇幅有限**



>自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

ndex"

            :prop="key"

            :label="key"

         ></el-table-column>

     </el-table>

  </div>

  <!-- <div v-else></div> -->

</div>

3.调用函数展示数据

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

### 最后

[外链图片转存中...(img-vyiTZWnn-1720112372911)]

[外链图片转存中...(img-y0EehQyZ-1720112372912)]

**资料过多，篇幅有限**



>自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。