vue将指定区域的表格数据或element-ui中el-table的数据单笔或多笔批量导出excel

公司在后台管理系统开发中用到了 vue+element-ui 组合的框架，但随着需求的越来越复杂，前端的工作难度也呈几何倍数递增，工作量随之增大。这不，在项目中增加一个将列表数据导出为excel的需求就紧跟着来了。

不光将数据导出，还得支持单笔导出或多笔批量导出。

前端：前端招谁惹谁了？

产品：入了前端门，生是前端人，死是前端鬼！

前端：

产品：

为了生活，我们已经殚精竭虑；为了工作，我们已经竭尽全力！

有需求，哭着也得实现啊。于是上网搜了一通，果然让我发现了解决之道：xlsx、file-saver和script-loader。

接下来就说说具体的实现方法：

上边提到了三个插件：xlsx、file-saver和script-loader，对，你没看错，就是三个插件，实现一个功能，需要三个插件，没办法啊。就像你的银行卡要用六位数的密码来保护两位数的余额一样，你有什么办法呢？谁让你败家呢？

一、 安装三个依赖项

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

二、在项目中新建一个文件夹（一般在src下新建，文件名自取，在这里命名为excel），在文件夹中放入Blob.js 和 export2Excel.js （这两个文件可在gitup上进行下载）

三、vue组件调用（由于项目中很多页面都会用到，所以我就封装成了公共的方法）

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
/*
 * 导出excel
 * @param { Array } params.excelHeader         导出excel的表头
 * @param { Array } params.excelFilterVal      导出数据所需的字段(multipleSelection或defaultList对象的属性)
 * @param { Array } params.multipleSelection   导出勾选的单笔或多笔数据
 * @param { Array } params.defaultList         默认导出列表所有数据
 * @param { Array } params.fileName            导出excel的文件名
*/
export function export2Excel(params){
    let excelHeader = params.excelHeader || ['类型', '合同号', '账户名', '币种', '金额']
    let excelFilterVal = params.excelFilterVal || ['type', 'contractCode', 'accountName', 'currency', 'amount']
    require.ensure([], () => {
        let { export_json_to_excel } = require('@/excel/Export2Excel');
        //默认为导出全部列表，也可以单笔导出或勾选多笔批量导出
        let listArr = params.multipleSelection.length > 0 ? JSON.parse(JSON.stringify(params.multipleSelection)) : JSON.parse(JSON.stringify(params.defaultList));
        let formatData = formatJson(excelFilterVal, listArr);
        export_json_to_excel(excelHeader, formatData, params.fileName);
    })
}
function formatJson(excelFilterVal, listArr) {
    return listArr.map(v => {
      switch(v.type){
        case '01':
        v.type = '小贷';
        break;
        case '02':
        v.type = '租赁';
        break;
        case '03':
        v.type = '电商';
        break;
      }
      return excelFilterVal.map(j => v[j]);
    })
}

说明：

1、以上代码在文件路径上用到了“@”符号，不懂的同学可自行查阅资料；

2、以上代码用到了JSON.stringify和JSON.parse，主要是因为对象的引用的问题。我们都知道，在将一个对象赋值给另一个对象时，如果其中一个对象的某个属性值被修改了也会影响到另一个对象的某个属性值的改变，这是因为他们在内存中实际上是指向了同一个引用地址，所以我就先用JSON.stringify将目标对象（这里是一个数组，数组也是Object对象，没毛病）转变成一个字符串，让其在内存中开辟一个新的地址，这样就切断了引用对象的指针联系，然后再用JSON.parse将字符串转变为一个数组，就解决了引用对象之间互相影响的问题。导出excel方法中调用的formatJson函数中的type字段映射的文字跟页面中映射的文字稍微不同（formatJson函数修改的是listArr数组，而listArr数组是通过页面展示的默认数组defaultList或用户选择的数据数组multipleSelection赋值得来的），就会出现一个对象对另一个对象的影响，因此不得不使用了JSON.stringify和JSON.parse。

3、关于multipleSelection，这个是用了element-ui中el-table的多选功能。正是这个功能才是能实现单笔导出或多笔批量导出的关键，当选择了单笔或多笔时，multipleSelection存储的就是你选择的数据（详见element-ui的表格组件API），然后判断该数组是否为空，若为空，则默认导出列表的所有数据，若不为空，则导出选择的列表数据：

let listArr = params.multipleSelection.length > 0 ? JSON.parse(JSON.stringify(params.multipleSelection)) : JSON.parse(JSON.stringify(params.defaultList));

4、网上还有其他解决方案，详见vue2.0 + element UI 中 el-table 数据导出Excel等等，此类方案倒没有本文的解决方案那么麻烦，但有一个问题就是无法自行选择具体导出表格哪些列的数据，它是一股脑将表格的所有数据都导出了，包括对表格数据的一些按钮操作如修改按钮、删除按钮等，甚至将表格第一列的checkbox复选框也导出了，虽然插件xlsx 有一个参数display为true时可以将隐藏的行和单元格的数组不被解析（具体使用方法没有用过，不甚了解），但如果将表格的行或单元格设置为隐藏，那我们还在页面中展示数据干嘛？显然，这种解决方案虽然简单，但灵活度不够，适用于比较简单的只展示数据的表格的导出。

本文参考：

https://blog.csdn.net/xiaoshihoukediaole/article/details/81296327

https://www.jianshu.com/p/6edf74f65fc1