vue导出excel表格(基于vuecli3.0)

一,首先是依赖的安装(一共有两个):
1, npm install -S file-saver xlsx
2,npm install -D script-loader
二,新建目录:
在src下新建一个文件夹export,新建两个js文件(后附js代码)vue导出excel表格(基于vuecli3.0)_第1张图片
三,在需要的.vue文件中操作:
引入import { export_json_to_excel } from ‘@/export/Export2Excel’
在需要的dom中添加点击事件

导出数据
定义两个方法(其中days为数据数组,options 为数据):
export2Excel() {
require.ensure([], () => {
const tHeader = [] // 对应表格输出的中文title
const filterVal = [] // 对应表格输出的数据
this.days.forEach(val => {
tHeader.push(val.name)
filterVal.push(val.value)
})
const list = this.options // 表格data
const data = this.formatJson(filterVal, list)
export_json_to_excel(tHeader, data, ‘统计列表’) // 对应下载文件的名字
})
},
formatJson(filterVal, jsonData) {
jsonData.map(v => filterVal.map(j => v[j]))
return jsonData.map(v => filterVal.map(j => v[j]))
},
即可。

你可能感兴趣的:(vue,excel,vue导出excel数据)