Vue将echarts数据导出成excel文件
一、下载vendor插件
下载 vendor 文件放置项目的 src 目录下
链接:https://pan.baidu.com/s/1XYYQ186zomOXHXkBX6pV9g
提取码:5Gn1
二、封装导出函数
在 main.js 中加入以下代码
/**
* 导出数据为excel
* @param tHeader 表头 ['name', 'age']
* @param tData 表内容 [{name: '张三', age: '20岁'}]
* @param name 表名 '年龄表'
*/
function exportDataExcel(tHeader, tData, name) {
// 注意require路径为你的vendor文件路径
const {
export_json_to_excel } = require('@/vendor/Export2Excel');
const data = tData.map(v => tHeader.map(j => v[j]))
console.log(data);
export_json_to_excel(tHeader, data, name);
}
// 将函数挂载到全局
Vue.prototype.exportDataExcel = exportDataExcel
三、在需要的地方整理参数后调用
exportData(){
// 获取echarts数据
var cityData = this.$refs.mapChart.getAtPresentData()
// excel表头
var tHead = ['地区', '地区编码', '线索量']
// excel表体
var tData = [];
// excel文件名
var tName = `${
cityData.cityName}线索量`
// 循环添加excel表体, key需跟表头对应
cityData.atPresent.forEach(item => {
tData.push({
'地区': item.name,
'地区编码': item.cityCode,
'线索量': item.value
})
});
// 导出
this.exportDataExcel(tHead, tData, tName)
},