今天给大家分享一个就是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:这个是导出表的名字

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

前往低代码交流专区

更多推荐