VUE 2项目使用vue-json-excel导出数据

记录一下后端返回的json数据转成excel导出

这里我们使用的是 vue-json-excel

1.安装包

npm install vue-json-excel

2.组件中使用

<download-excel
  class="btn btn-default"
  :data="json_data"
  :fields="json_fields"
  worksheet="My Worksheet"
  name="filename.xls"
>
  Download Excel (you can customize this with html code!)
</download-excel>

import Vue from "vue";
import JsonExcel from "vue-json-excel";

Vue.component("downloadExcel", JsonExcel);

json_data就是后端返回的json 数据

3.如果点击后需要请求接口再导出接口的数据可以使用 fetch 参数，使用如下

//template模板代码
<download-excel :fetch="fetchData">
        <el-button type="success" size="small">导出</el-button>
</download-excel>

//js中的方法，需要使用异步
async fetchData(){
      const response = await axios.get('https://...........');
      return response.data;
    }

具体还有多个参数，详细用法可以参考GitHub官方说明
vue3的话可以使用 vue-json-excel3,具体使用可参考GitHub官方说明