vue调用接口导出excel数据

今天给大家分享一个就是vue调用后台接口导出excel的方法。
首先之前用的是vue 的js-export-excel这个插件，后来发现就是当数据超过一百条的时候他就不会导出了，不报错也就是不导出，我尝试着打断点测试然后没找出来，最后就换了插件。就是vue-json-excel。

首先在根目录下安装
npm install vue-json-excel --save 注意（最好是拿cnpm， 你懂得~）
然后再main.js 文件中添加
import JsonExcel from ‘vue-json-excel’
Vue.component(‘downloadExcel’, JsonExcel)

然后就是再组件页面中使用了。
具体用法如下：

<download-excel
      class = "export-excel-wrapper"
      :data = "json_data"
      :fields = "json_fields"
      name = "远程诊断报告导出.xls">

   
      <el-button type="primary" size="small">导出EXCEL</el-button>
</download-excel>```


注意的就是动态的那两个参数啥意思
fields：这个就是导出数据表的标头是个对象，json形式的设置标头，比如：key=value（value是你获取数据接口之后返回的每一项的字段key）
data：就是你调用后台接口的返回的数据。
name：这个是导出表的名字

完了之后就点击导出，就可以了，这儿有个小问题就是尽量把这个歌功能封装成一个方法函数，然后需要的时候调用，如果直接在事件里面写就刷新会出现下载不了的情况，再次点击才可以。所以注意一下。