Vue使用Export2Excel导出包含多Sheet的Excel文件

这篇文章不在赘述如何安装相关依赖以及导入.js文件。如果有需要的小伙伴可以搜一下即可有，很多文章都有手把手教程。好，直接步入正轨！首先我们先来看看在我们导入的Export2excel.js文件中，有哪些是我们在导出时需要用到的方法(在实现多Sheet的excel文件之前，我们先来了解下单工作簿的excel文件是如何导出的)
下面的导出方法中需要用到的数据和我们在网页中渲染到table上的数据不同，需要格式化

/**
 *  格式数据
 *  @filterVal  格式头
 *  @tableData  用来格式的表格数据
 */
formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            }

不难看出，formatJson方法的参数为我们需要对应表格输出的数据和源数据；
以这个代码为例，我们需要的表格数据为’name’,‘count’。而格式化后的数据就是将我们需要的数据整理了出来！

export function export2Excel(th, jsonData, defaultTitle) {

  /* original data */

  var data = jsonData;
  data.unshift(th);
  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。这个方法的参数分别为th(对应表格输出的表头,也就是tHeader),jsonData(格式化后的数据),defaultTitle(导出的文件名)
我们先来大概看一下导出方法中是如何对各个数据进行处理的，这样后期才能实现在这个基础上进行添补，达到我们想实现的多sheet！
/ original data /

data.unshift(th);把我们需要对应表格输出的表头添加到了格式化后数据的开头
var ws_name = "SheetJS";不难看出这是excel中工作簿的名字
ws = sheet_from_array_of_arrays(data);将data数据再次通过方法进行处理
/ add worksheet to workbook /
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws;见名知意，将数据添加到工作簿当中。后面还有3行代码就补贴出来了，，，自己看一看就会懂得！
其实导出的原理也就是如此，定义好表头和需要导出的数据，将数据格式化后在调用Export2excel中导出的方法。方法需要什么参数就给他什么参数就完事了。接下来是我们的重点，如何导出多Sheet的Excel文件呢？？？
其实在我们了解完导出代码是如何实现后，实现多sheet就不是很难了，只是需要好好思考一下！这里也就不卖关子，直接上代码！

export function export2ExcelMultiSheet(jsonData, defaultTitle) {
    let data = jsonData;
    //添加标题
    for (let item of data) {
        item.data.unshift(item.th);
    }

    let wb = new Workbook();
    //生成多个sheet
    for (let item of data) {
        wb.SheetNames.push(item.sheetTitle)
        wb.Sheets[item.sheetTitle] = sheet_from_array_of_arrays(item.data);
    }

    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")
}

与原生的导出方法如出一辙，我们先将tHeader添加到我们的数据中。前提源数据必须为数组的数据结构。只是我们这次通过循环的方式，给每个data中添加而已。下面也都一样，就，，，自己看吧
你以为这样就万事大吉了吗？不。。。接下来才是重点
相信细心的小伙伴已经发现，新的导出方法参数只有2个，一个为数据，一个为表名称？那之前的tHeader去哪里了？让我一一道来。。。
1.在我们需要知道自己需要什么之后，就该想想需要的东西从哪里来?
2.需要的最终结果是什么样子的？如何来组装数据
以多sheet为例子。说是多sheet，不就是有多个工作簿吗?每个工作簿需要什么?表头（tHeader）,数据（格式化后的data）,每个工作簿的名字（SheetNames），文件名称（defaultTitle）
整理好我们需要什么之后，干就完事儿了！
再拼装数据之前，先以我的需求为示例：


需要将展开的数据以Sheet标签的形式与主列表导出的数据在同一Excel中。放结果：

这里不仅可以将展开的数据以多标签的形式存在，并且对标签名也进行了更改！下面说是如何做的
1：在data中定义好数据

2：因为展开数据时，也是通过方法去后台拉取数据。我们要做的，就是在展开一次后将返回的数据存储下来！也就是存到之前定义好的openEdData中。那么我们就在获取展开数据的方法中这样写：

先将名字存下来，作为我们标签的名称；然后将需要的数据，存储到openEdata中。此时openEdData存储的数据如下：

这里的数据格式为业务，不做描述；
因为导出方法中需要我们的数据为数组，所以事先定义好一个新的let result = [];

其中this.countByAreaList为列表的数据。克隆一份出来对其中的数据进行处理。最后将处理好的数据push到我们的result中。注意我们将标签名称sheettitle，表头tHeader,经过formatJson处理后的数据都添加了进去。我们将这部分数据成为主表数据

这里所处理的数据，也就是我们这次主要说的Sheet中的数据。因为前面已经将所有展开后的数据都存储了起来，我们在这里遍历处理后push到result中即可！最后我们调用事先写好的导出方法，将数据与文件名两个参数添上即可！
现在我们的数据已经准备好了，剩下来的就是和之前的一样，格式化数据之后再调用导出方法，即可大功告成！
相信大家也都明白了，总结的来说就是既然原生代码中的标签名字和数据是单一的，那么我们就可以以循环的方式让他变成不单一的！这样就实现了我们导出包含多Sheet的Excel文件的需求！
另外还有一篇文章是介绍如何使用Export导出3级表头的Excel文件**，希望也能帮助你，传送门：
https://blog.csdn.net/qq_36357384/article/details/108197955