公司在后台管理系统开发中用到了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组件调用（由于项目中很多页面都会用到，所以我就封装成了公共的方法）
/* * 导出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存储的就是你选择的数据（详见），然后判断该数组是否为空，若为空，则默认导出列表的所有数据，若不为空，则导出选择的列表数据：
let listArr = params.multipleSelection.length > 0 ? JSON.parse(JSON.stringify(params.multipleSelection)) : JSON.parse(JSON.stringify(params.defaultList));