java vue pio导出excel如何在浏览器显示 vue后端导出excel

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

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

• 第一步：下载安装
• 第二步：main.js中引入
• 第三步：添加按钮触发导出
• 第四步：处理后台返回的数据（重点，请耐心看完）
• 第五步：验证导出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结果

成功！！！