Vue将后台返回的数据导出为Excel表格

Vue将后台返回数据导出Excel表格

话不多说，先上效果：

第一步：下载安装

npm install vue-json-excel

第二步：main.js中引入

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

第三步：添加按钮触发导出

在需要使用 “导出为Excel表格” 的页面添加导出按钮。并且添加点击事件，如下@click=“exportData” 。
请先直接复制以下代码：

<!-- 导出按钮 -->
   <download-excel
        class = "export-excel-wrapper"
        :data = "json_data"
        name = "江下产品推广链接.xls">
        <el-button @click="exportData" type="primary">下载全部推广链接</el-button>
    </download-excel>

第四步：处理后台返回的数据（重点，请耐心看完）

1.定义一个数组保存后台返回的数据

2.请求后台数据
3.请求结果赋值到刚刚定义的this.tableData中
4.将this.tableData输出到控制台观察

5.在后台返回的数据中，我只需要导出箭头所指的三条数据。
6.定义一个数组json_data，注意要与第三步代码中:data内容一致。


7.想办法将数组json_data变成以下这种格式：重点！！！

[
	{
		"产品名称": xxx,
		"产品介绍": xxx,
		"推广链接": xxx
	},
	{
		"产品名称": xxx,
		"产品介绍": xxx,
		"推广链接": xxx
	},
	{
		"产品名称": xxx,
		"产品介绍": xxx,
		"推广链接": xxx
	},
	……往下以此类推……
]

上面的“产品名称”、“产品介绍”、“推广链接”将会对应Excel的表头。
后面的xxx对应表头下相应的数据。

我是这样处理的：
提示：大家按实际情况处理数据，因为后台返回的数据格式可能与我给大家看的不一样。反正记住最终要变成[{…}, {…}, {…}]这种格式！！！

第五步：验证导出Excel结果

成功！！！