Vue将echarts数据导出成excel文件

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)
 },

四、导出结果