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

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

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

前端：前端招谁惹谁了？

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

前端：

产品：

为了生活，咱们已经殚精竭虑；为了工做，咱们已经不遗余力！

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

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

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

1、 安装三个依赖项

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

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

3、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]);
    })
}

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

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

三、关于multipleSelection，这个是用了element-ui中el-table的多选功能。正是这个功能才是能实现单笔导出或多笔批量导出的关键，当选择了单笔或多笔时，multipleSelection存储的就是你选择的数据（详见<a href="http://element-cn.eleme.io/#/zh-CN/component/table" target="_blank">element-ui的表格组件API</a>），而后判断该数组是否为空，若为空，则默认导出列表的全部数据，若不为空，则导出选择的列表数据： let listArr = params.multipleSelection.length > 0 ? JSON.parse(JSON.stringify(params.multipleSelection)) : JSON.parse(JSON.stringify(params.defaultList));

四、网上还有其余解决方案，详见<a href="https://www.jianshu.com/p/6edf74f65fc1" target="_blank">vue2.0 + element UI 中 el-table 数据导出Excel</a>等等，此类方案倒没有本文的解决方案那么麻烦，但有一个问题就是没法自行选择具体导出表格哪些列的数据，它是一股脑将表格的全部数据都导出了，包括对表格数据的一些按钮操做如修改按钮、删除按钮等，甚至将表格第一列的checkbox复选框也导出了，虽然插件xlsx 有一个参数display为true时能够将隐藏的行和单元格的数组不被解析（具体使用方法没有用过，不甚了解），但若是将表格的行或单元格设置为隐藏，那咱们还在页面中展现数据干吗？显然，这种解决方案虽然简单，但灵活度不够，适用于比较简单的只展现数据的表格的导出。

本文参考： https://blog.csdn.net/xiaoshihoukediaole/article/details/81296327 https://www.jianshu.com/p/6edf74f65fc1

原文出处：https://www.cnblogs.com/tnnyang/p/10339214.html