1、需求导入

需求样式.png

之前做过的是纯前端进行处理的，现在后台提供了接口，前端处理导出的话数据量非常大的话会很不友好，一来是导出速度慢，二来是导出的文件大小比较大，经过我测试了下，纯前端导出的话，44条数据就占据了255K，而后台处理的话82条数据也只需要6.9K，之间的差异非常明显了，所以有的优化的事情还得后台做。

文件大小.png

2、接口说明

接口.png

传入参数.png

这是后台提供的接口文档说明，一般来说Get请求对于前端来处理的话会省去很多麻烦，如果后台提供给我们的是Post请求的话，那么我们前端还需要自行传入下载的文件路径以及需要导出的数据，这个工作量是非常大的所以，这个一般会要求后台处理成Get请求，那么我们就可以快速的解决问题了。

3、代码部分

首先我们先弄个按钮

<Button type="info" @click="exportData()">
    <Icon type="ios-download-outline"></Icon> 导出excel
</Button>

然后我们需要在这个按钮的点击事件中调后台的接口

 exportData() {
      //  ${this.url}写的是你开发/测试环境下的url
      window.location.href = `${this.$Url}/demo/sysSystemLog/exportExcel?beginTime=${this.beginTime}&endTime=${this.endTime}`;    
},

${this.url}可以在自己项目中main.js中去找，找响应的代理

// 比如
Vue.prototype.$Url = 'http://oa.demo.com';//测试环境
Vue.prototype.$Url = 'http://iot.demo.com'; //测试环境

4、导出对应的时间段的日志

选择了对应的时间后，点击查询，然后点击导出按钮

查询.png

调取了后台的导出日志的接口

导出日志.png

.xls.png