小编这次要给大家分享的是如何实现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 https://github.com/alibaba/easyexcel
com.alibaba easyexcel {latestVersion}
//这里可以不用关闭流,流在方法结束，会自动关闭，通过配置product，指定返回头
@PostMapping(path = "/user/excelExport", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE)
public void excelExport(WithdrawListDto withdrawListDto, HttpServletResponse response) {
List 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) {
}看完这篇关于如何实现Springboot vue导出功能的文章，如果觉得文章内容写得不错的话，可以把它分享出去给更多人看到。
