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

快来打我* 2022-11-29 12:59 1187阅读 0赞

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][20200824104222862.png_pic_center]  
![在这里插入图片描述][20200824104312393.png_pic_center]  
不难看出，`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 /*

![在这里插入图片描述][20200824110046263.png_pic_center]  
`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）**  
整理好我们需要什么之后，干就完事儿了！  
再拼装数据之前，先以我的需求为示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 2]  
需要将展开的数据以Sheet标签的形式与主列表导出的数据在同一Excel中。放结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 3]  
这里不仅可以将展开的数据以多标签的形式存在，并且对标签名也进行了更改！下面说是如何做的  
**1：在data中定义好数据**  
![在这里插入图片描述][20200824131749905.png_pic_center]  
2：因为展开数据时，也是通过方法去后台拉取数据。我们要做的，就是在展开一次后将返回的数据存储下来！也就是存到之前定义好的openEdData中。那么我们就在获取展开数据的方法中这样写：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 4]  
先将名字存下来，作为我们标签的名称；然后将需要的数据，存储到openEdata中。此时openEdData存储的数据如下：  
![在这里插入图片描述][20200824133241693.png_pic_center]  
这里的数据格式为业务，不做描述；  
因为导出方法中需要我们的数据为数组，所以事先定义好一个新的`let result = [];`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 5]  
其中this.countByAreaList为列表的数据。克隆一份出来对其中的数据进行处理。最后将处理好的数据push到我们的result中。注意我们将标签名称`sheettitle`，表头`tHeader`,经过formatJson处理后的数据都添加了进去。我们将这部分数据成为主表数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 6]  
这里所处理的数据，也就是我们这次主要说的Sheet中的数据。因为前面已经将所有展开后的数据都存储了起来，*我们在这里遍历处理后push到result中即可！**最后我们调用事先写好的导出方法，将数据与文件名两个参数添上即可！  
现在我们的数据已经准备好了，剩下来的就是和之前的一样，格式化数据之后再调用导出方法，即可大功告成！  
相信大家也都明白了，总结的来说就是既然原生代码中的标签名字和数据是单一的，那么我们就可以以循环的方式让他变成不单一的！这样就实现了我们导出包含多Sheet的Excel文件的需求！  
另外还有一篇文章是介绍**如何使用Export导出3级表头的Excel文件*\*\*，希望也能帮助你，传送门：  
https://blog.csdn.net/qq\_36357384/article/details/108197955

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/f5bf5e43fe60440182152f604f65931f.png
[20200824104222862.png_pic_center]: /images/20221124/f27efe526b8e49a6878067718ba70c2a.png
[20200824104312393.png_pic_center]: /images/20221124/c83f0e1f519949e6a1828a2d2a7c919f.png
[20200824110046263.png_pic_center]: /images/20221124/19f0b8c372dc4b45886dc13d86b626d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/312948fe534747a0bc79aef9cc0f6a8f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/def43a4e908c4b90a127c5d3293e9aec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/6b3d7446a20a4798b053560721c450c1.png
[20200824131749905.png_pic_center]: /images/20221124/430451d4176e462a8b6b02b51fbc6dc5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221124/0777a3a08ee64e99bca8291a91359d43.png
[20200824133241693.png_pic_center]: /images/20221124/c30c58246dca4bc8aee8d721a31c8df2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221124/844c39866b6e41a5a9407d08c757c54e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MzU3Mzg0_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221124/7e5cc718153645668c75e0613b7b0a19.png