【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)]
 
**资料过多，篇幅有限**
 
 
>自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
 复制