Vue + Xsxl导出Excel表格

场景需求：需要将页面上的表格 / 其他类型的数据导出为excel表格

1. 依赖准备

npm i xlsl -S  // 用于导出Excel表
npm i file-saver -S // 用于文件的下载
npm i script-loader -S // 用于loader的解析

2. 静态资源准备

    

     1.  Blob.js

     2.  exportExcel.js

链接: https://pan.baidu.com/s/1XvBA2jSpAGYi8RxU5vDb9A 提取码: ztr1

由于这两个JS文件代码量比较大，直接放上来不利于阅读，所以我放在我的网盘里面，有需要可以去下载

3. 引入index.js文件（调用导出方法）

        1. 通过import引入index.js文件中的pluginsExportExcel

        2. 调用pluginsExportExcel（文件名称，标题的Key列表，标题的中文列表，列表数据）

/**
 * 调用exportExcel和Blob导出的函数，这里只提供导出功能，不处理数据
 * @param {文件名称  ==> string} fileName 
 * @param {标题栏的key列表 ==> Array} firstRowKey 
 * @param {标题栏的title列表 ==> Array} firstRowNameList 
 * @param {列表数据 ==> list} tableData 
 */
export const pluginsExportExcel = (fileName, titleKey, titleList, tableData) => {
  require.ensure([], () => {
    const { exportJSONToExcel } = require('./Export2Excel') // 注意这个Export2Excel路径
    const data = formatJson(titleKey, tableData)
    exportJSONToExcel(titleList, data, fileName) // 最后一个是表名字
  })
}
function formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]))
}