当前位置: 移动技术网 > IT编程>开发语言>Java > Springboot vue导出功能实现代码

Springboot vue导出功能实现代码

2020年05月12日  | 移动技术网IT编程  | 我要评论

三生三世十里桃花37集,天猫焕新,哈丁鱼博客

最近在工作遇到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) {
   }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网