读前说明 vue2、element-ui下利用第三方包导出 本文将用于说明记录如何将网页中的表格元素导出去为xlsx文件，其中也包括了一些常见问题与报错，如果你遇到了相似的问题可以从下方得到答案

网页表格数据的导出元素

基础使用

前期准备：

安装依赖：xlsx、file-saver：

npm install xlsx --save
npm install file-saver --save

安装依赖时由于npm包版本和node版本不一致可能报错

使用npm7 及更高的版本，对等依赖问题视为错误，而它们通常只是版本 6 中的警告。 此时可使用–legacy-peer-deps

npm install --legacy-peer-deps

也可设置为永久安装配置

npm config set legacy-peer-deps true

发生错误原因

npm 升级到 7.x以上后，会出现上游依赖冲突

–legacy-peer-deps：

安装时忽略所有 peerDependencie，

默认使用npm 4-6版本的安装模式，

安装过程中是会跳过对等依赖项

包的引入与挂载

入口文件引入包(main.js)

// vue中导出excel表格模板
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
//注意在vue引入后才能挂载到原型上
Vue.prototype.$FileSaver = FileSaver; //设置全局
Vue.prototype.$XLSX = XLSX; //设置全局

包的使用

为表单打上id和ref标记

<el-table
    id="table"
    ref="table"
    :data="list"
></el-table>

定义导出按钮

<el-button class="btn-seal" @click="exportData">导出表格</el-button>

一般使用

如果表单没有固定列（el-table的fixed属性来让某一列固定）

点击事件直接调用exportTable()函数即可

//导出表格处理函数
    exportData() {
        this.exportTable()
    },

导出表格具体操作

    //具体函数处理
    exportTable(){
    //通过id找到所要导出表格元素
      let tables = document.getElementById("table");
        let table_book = this.$XLSX.utils.table_to_book(tables);
        let table_write = this.$XLSX.write(table_book, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
        //尝试导出名字为测试表.xlsx的表格
          this.$FileSaver.saveAs(
            new Blob([table_write], { type: "application/octet-stream" }),
            "测试表.xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, table_write);
        }
        //将文件返回
        return table_write;
    },

特殊情况

当表格元素使用了固定列时导出xlsx会出现数据重复的情况

需要下方代码进行处理

原因

ele-ui固定列采用的是复制两份表格。通过一个隐藏一个显示来实现交互效果。

当导出el-table 就会将两个div内的table都导出，导致数据重复

//导出表格处理函数
    exportData() {
      //判断有无固定列table
      var fixTable = document.querySelector('.el-table__fixed-right');
      if (fixTable) {
        //有固定列，先删除固定列的Table
        document.querySelector('#table').removeChild(fixTable);
        this.exportTable()
        document.querySelector('#table').appendChild(fixTable);
      } else {
        //没有固定列table 直接导出Excel
        this.exportTable()
      }
    },
   

总结：

先引包，在入口文件中引入，挂载到vue原型上，后在table元素打上id标记，后定义处理和导出函数，利用包中的方法将表格导出

二.扩展使用

• 数据分页情况下全部导出数据：需在html中添加表格并隐藏，将这个表格作为隐式的导出组件。
• 数据多选导出数据：将勾选的数据插入至隐式数据表格中，导出即可。