Springboot vue导出功能实现代码

最近在工作遇到vue和springboot 实现导出功能，翻看很多资料，发现一些博客写法都过时了，所以自己特此记录下，使用版本vue2,springboot 2x以上,chrome浏览器 76.0.3809.100

vue 2写法

let blob = new blob([res.data], { type: 'application/octer-stream' });

其中我发现很多博客用这样的写法，但是我发现打印res的时候没有发现data这个参数,总是报错后面直接用res就好了。
正确写法let blob = new blob([res], { type: 'application/octer-stream' });

科普一下：axios中params和data两者，以为他们是相同的，实则不然。 因为params是添加到url的请求字符串中的，而data是添加到请求体（body）中的，最好使用params参数

import axios from 'axios'
axios({
	method: 'post',
	 url: '/user/excelexport',
	 responsetype：‘blob',
	 params
}
).then(res => {
const link = document.createelement('a')
let blob = new blob([res], { type: 'application/octer-stream' });
link.style.display = 'none'
link.href = url.createobjecturl(blob);
link.setattribute('download', filename + '.xlsx');
document.body.appendchild(link);
link.click();
document.body.removechild(link);
}
).catch(err => {
console.log(err)
}
);

后台代码写法 ——使用阿里巴巴的excel导出类easyexcel  

<dependency>
<groupid>com.alibaba</groupid>
<artifactid>easyexcel</artifactid>
<version>{latestversion}</version>
</dependency>

//这里可以不用关闭流,流在方法结束，会自动关闭，通过配置product，指定返回头
   @postmapping(path = "/user/excelexport", produces = mediatype.application_octet_stream_value)
   public void excelexport(withdrawlistdto withdrawlistdto, httpservletresponse response) {
       list<withdrawlistvo> list = withdrawservice.list(withdrawlistdto);
       excelwriter writer = new excelwriter(response.getoutputstream(), exceltypeenum.xlsx, true);
       sheet sheet1 = new sheet(1, 0, withdrawlistvo.class);
       sheet1.setsheetname("sheet1");
       writer.write(list, sheet1);
   }

postmapping，加上返回头了。前端传过来的context-type 要加上multipart/form-data 类型，然后在前端传过来的url进行拼接参数,就可以进行多参数，但是不建议参数太多

例子：如/user/excelimport?account=12731564&username=李四

@postmapping(path = "/user/excelimport")
   public void excelimport(withdrawlistdto withdrawlistdto,multipartfile multipartfile) {
   }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。