[JavaScript知识库]vue导出导入Excel文件（复杂表头）

最近项目中需要用到将页面上展示的少量数据导出到Excel，而页面的表格的表头是做了归类的多级表头，在网上找到一篇文章介绍的非常好，拿过来试了试，修正了其中一些错误，下面贴的代码是在项目中使用过的。
导入参考的文章：https://blog.csdn.net/weixin_52103939/article/details/118551223
导出参考的文章：http://t.zoukankan.com/guwufeiyang-p-13245875.html
首先安装插件：npm install -S file-saver xlsx
在一个vue页面中输入如下代码：

<template>
  <div>
    <el-button @click="exportClick">导出</el-button>
    <!-- 导入Excel -->
    <el-upload action="/上传文件的接口" :on-change="onChange" :auto-upload="false" :show-file-list="false"
      accept=".xls, .xlsx" ref="upload" :multiple="true">
      <el-button type="warning" icon="el-icon-folder-add">批量导入</el-button>
    </el-upload>

    <el-table :data="tableData" style="width: 100%" id="mainTable">
      <el-table-column prop="date" label="日期" width="150">
      </el-table-column>
      <el-table-column label="配送信息" align="center">
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column label="地址" align="center">
          <el-table-column prop="province" label="省份" width="120">
          </el-table-column>
          <el-table-column prop="city" label="市区" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="zip" label="邮编" width="120">
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      },],
    }
  },
  methods: {
    exportClick() {
      this.exportExcel('test', 'mainTable');
    },
    exportExcel(filename, tableId) {
      /* generate workbook object from table */
      var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
      var table = document.querySelector('#' + tableId).cloneNode(true)
      // table.removeChild(table.querySelector('.el-table__fixed')) //这里是双下划线
      var wb = XLSX.utils.table_to_book(table, xlsxParam)
      /* get binary string as output */
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), filename + '.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout
    },
    // 文件选择回调
    onChange(file, fileList) {
      this.readExcel(file); // 调用读取数据的方法
    },
    // 读取数据
    readExcel(file) {
      let that = this;
      if (!file) {
        //如果没有文件
        return false;
      } else if (!/.(xls|xlsx)$/.test(file.name.toLowerCase())) {
        this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
      }
      const fileReader = new FileReader();
      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: "binary"
          });
          if (workbook.SheetNames.length >= 1) {
            this.$message({
              message: "导入数据表格成功",
              showClose: true,
              type: "success"
            });
          }
          const wsname = workbook.SheetNames[0]; //取第一张表
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
          // console.log(ws)
          that.tableData = []; //清空接收数据
          for (var i = 2; i < ws.length; i++) {
            var sheetData = {
              // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
              date: ws[i]["日期"],
              name: ws[i]["配送信息"],
              province: ws[i]["__EMPTY"],
              city: ws[i]["__EMPTY_1"],
              address: ws[i]["__EMPTY_2"],
              zip: ws[i]["__EMPTY_3"],
            };
            that.tableData.push(sheetData);
          }
          this.$refs.upload.value = "";
        } catch (e) {
          console.log(e)
          return false;
        }
      };
      // 如果为原生 input 则应是 files[0]
      fileReader.readAsBinaryString(file.raw);
    },
  }
}
</script>

注意：// table.removeChild(table.querySelector(‘.el-table__fixed’)) 是针对vue某些表其实含有两个表的情况。