vue导出Excel表格,报错utils of undefined 是版本原因

搞了半天原来是版本的原因

操作步骤：

1、安装相关的依赖；（xlsx，file-saver）

执行命令：

npm install --save xlsx file-saver

安装成功之后发现项目报错，一直提示until这个东西没有定义，查了好多一直以为是机子vue2和vue3同时存在的原因，最后发现不是，原来是版本原因

解决办法：

utils未定义的话需要换一下版本

npm install --save xlsx@0.17.0
npm install --save file-saver@2.0.5

2.给表格添加ref属性或者给表格添加id

<el-table
          :span-method="arraySpanMethod"
          :header-cell-style="{background:'#315392',color:'#fff'}"
          :data="tableData"
          border
          height="400"
          style="width: 100%;height:100%;overflow:auto;"
          v-loading="loading"
          id="table1"
        >
.....
</el-table>

<table ref="exportTableRef"> ... </table>

3 在组件中引入依赖

 表格使用ref的代码段

// 引入导出表格的依赖包
import XLSX from "xlsx";
import FileSaver from "file-saver";
 
//点击导出
 <a-button @click="exportBtn">导出</a-button>
 
 
//methods方法
 exportBtn () {
      // 获取表格元素
      const els = this.$refs.exportTableRef;
      // 文件名
      const filename = "核销订单.xlsx";
      /* generate workbook object from table */
      const wb = XLSX.utils.table_to_book(els);
      /* 或者用id */
      // const wb = XLSX.utils.table_to_book(document.getElementById("id"))
      /* get binary string as output */
      const wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          filename
        );
      } catch (e) {
        console.log(e);
      }
      return wbout;
    },

表格使用id的代码段

//定义导出表格触发事件,需要传入要导出的表格id
    exportExcel(id) {
      let wb = XLSX.utils.table_to_book(document.querySelector("#"+id), {
          raw: true,//如果表格里有数字、日期这些、需要加上raw: true
        });
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          // Blob 对象表示一个不可变、原始数据的类文件对象。
          new Blob([wbout], { type: "application/octet-stream" }),
          // 设置导出文件名称
          "xxx.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

记得要引入依赖包哦！

ps：安装依赖过程中发现file-saver这个依赖包一直安装在本地C盘typescript下面的node-moudle中，没有明白什么原因，因为本地项目是在E盘，有知道的大神请指教一下感谢！