- 安装所需的依赖
npm install -S file-saver xlsx (-S => 是--save 的简写 )
npm install -D script-loader (-D => 是 --save-dev 的简写)
- 创建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了一遍