vue 前端导出Excel

1. 安装所需的依赖

npm install -S file-saver xlsx (-S => 是--save 的简写 )
npm install -D script-loader (-D => 是 --save-dev 的简写)

2. 创建Export2Excel和blob文件

具体在项目src目录下新建一个Excel的文件夹，并分别下载Blob.js和Export2Excel.js文件

这里附上这两个文件的github下载路径：Blob.js和Export2Excel.js

3. 项目实战
先导入 import { exportJsonToExcel } from ‘@/Excel/Export2Excel’ 这里我重命名了原方法名，
原方法名为：export_json_to_excel, 因为在vue代码中使用的问题，我稍微修改了下

exportDataToExcel() {
  const list = this.tableSelections // 把要导出的数据tableData存到list
  if (list.length > 0) {
    // let table = this.$refs.itemDetailTable
    const tHeader = ['学号', '姓名', '科目', '成绩'] // 列头名称
    const filterVal = ['schoolNum', 'name', 'category', 'score'] // 列头字段
    // table.columns.forEach((column, index) => {
    //   if (column.property) {
    //     tHeader.push(column.label)
    //     filterVal.push(column.property)
    //   }
    // })
    const data = this.formatJson(filterVal, list)
    exportJsonToExcel(tHeader, data, '学生成绩excel') // 定义导出的excle名字
  } else {
    this.$Message('请先选择数据')
  }
},
// 格式化json数据
formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]))
}

// 代码中注释的部分是因为导出的数据重复，多push了一遍