vue Elementui导出Excel多表格头部表格数据（亲测--实用）

前言：

最近实现了Excel实现多表格头部导出数据的方法（其实生成应该是后台完成的但是我摸索出了一个方法 可以实现！哇哦~）

---

准备工作：

1.首先安装两个依赖

• npm install -S file-saver xlsx
  
• npm install -D script-loader
  

2. 引入js文件

• 项目中src目录下新建excel文件夹，里面存放Blob.js和Export2Excel.js两个JS文件
• 链接：点击下载
• 提取码：1u3g
• 下图特别解释下文件夹下有三个js文件
  
  export2Excel.js：导出Excel单表头数据js文件
  
  export2Excel2.js：导出Excel多表头数据js文件

---

示例：

1.methods里写入两个方法，如下:

 // 导出Excel点击方法
 handleDownload() {
        // this.downloadLoading = true // 加载遮罩层开启
        const {export_json_to_excel} = require('../js/Export2Excel2'); //引入文件
        const multiHeader = [['牛奶', '果汁', '食品数量', '', '零食数量', '', '', '蔬菜数量', '', '']] //对应表格输出的title
        const tHeader = [['', '', '甜甜圈', '干脆面', '面包', '山药薄片', '薯片', '菠菜', '芹菜', '大油菜']] //对应表格输出的title
        const filterVal = ['milk', 'juice', 'ttq', 'noodle', 'break', 'crispss', 'chips', 'spinach', 'celery', 'Canola'] // 对应表格tableData输出的数据
        const header = []
        //进行所有表头的单元格合并，建议一行一行来，不然容易整乱
        const merges = [
          "A1:A2",
          "B1:B2",
          "C1:D1",
          "E1:G1",
          "H1:J1",
          "K1:M1",
          "N1:N2",
          "O1:O2",
          "P1:P2"
        ];
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(multiHeader, tHeader, header, data, '我的零食库', merges);
        // this.downloadLoading = false // 加载遮罩层结束
      },

      // 将JSON转换成map
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },

注： 要自己修改引入文件位置
const {export_json_to_excel} = require(’…/js/Export2Excel2’); //引入文件

2.Export2Excel2.js具体解释

export function export_json_to_excel(multiHeader = [], multiHeader2 = [], header, jsonData, defaultTitle, merges = [],) {

  /* original data */

  var data = jsonData;
  data.unshift(header);

  //此处是第二行表头
  for (let i = multiHeader2.length - 1; i > -1; i--) {
    data.unshift(multiHeader2[i])
  }

  //此处是第一行行表头
  for (let i = multiHeader.length - 1; i > -1; i--) {
    data.unshift(multiHeader[i])
  }

  var ws_name = "SheetJS";

  var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);


  /* add worksheet to workbook */
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;

  var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
  var title = defaultTitle || '列表'
  saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
}

export_json_to_excel方法参数一定要按照顺序对应传递

3. 导出效果展示

3.小问题求解

如上图显示表格合并和居中显示问题merges 方法如何去运用，有没有好的解决方法。

---

总结

单表头方法为替换js文件一行代码即可：require(’…/js/Export2Excel’)

本篇文章为调试成功，希望能带给大家帮助。

本文由博客一文多发平台 OpenWrite 发布！