风雨官道,余额宝最多能存多少钱,现金的棋牌游戏
最近vue项目中用到了导入导出功能，在网上搜索了一番之后，决定采用blob方式，这也是大家推荐的一种的方式，特此做下记录。
导出excel功能
这里不谈别人怎么实现的，我是从后台生成了excel流文件返回给前端的。
下面具体看一下后台的代码：
我要评论
/**
* 批量导出用户
* @param condition
* @param response
*/
@postmapping("/exportuser")
public void exportuser(@requestbody userquerycondition condition,httpservletresponse response){
xssfworkbook book = new xssfworkbook();
try {
list<userparam> list = indexservice.exportuser(condition);
if (list != null && list.size() > 0) {
xssfsheet sheet = book.createsheet("mysheent");
string[] vals = {"用户id", "邮箱账号","昵称","年龄","性别","状态", "注册时间"};
createexcel(sheet, 0, vals);
for (int i = 0; i < list.size(); i++) {
userparam entity = list.get(i);
string[] vals2 = new string[]{string.valueof(entity.getid()), entity.getemail(), entity.getname(), string.valueof(entity.getage()),
entity.getsex() == 0 ? "女":"男",entity.getremoved() == 0 ? "启用":"禁用",entity.getregisterdate()};
createexcel(sheet, i + 1, vals2);
}
book.write(generateresponseexcel("用户列表",response));
}
book.close();
}catch(exception e){
e.printstacktrace();
}
}
/**
* @param excelname
* 要生成的文件名字
* @return
* @throws ioexception
*/
private servletoutputstream generateresponseexcel(string excelname, httpservletresponse response) throws ioexception {
excelname = excelname == null || "".equals(excelname) ? "excel" : urlencoder.encode(excelname, "utf-8");
response.setcontenttype("application/vnd.ms-excel;charset=utf-8");
response.setheader("content-disposition", "attachment; filename=" + excelname + ".xlsx");
return response.getoutputstream();
}
对于第一个函数exportuser来说，主要是根据传回来的条件查询数据库并生成相应的excel表格，之后book.write(generateresponseexcel(“用户列表”,response)); 这行代码调用第二个函数generateresponseexcel来生成流文件以及处理返回的response。
这里需要注意的地方就两个：
response.setcontenttype("application/vnd.ms-excel;charset=utf-8");
response.setheader("content-disposition", "attachment; filename=" + excelname + ".xlsx");
第一行application/vnd.ms-excel说明将结果导出为excel
第二行说明提供那个打开/保存对话框，将文件作为附件下载
上面就是后台的全部代码了，接下来看一下前端的代码：
axios({
method: 'post',
url: 'http://localhost:19090/exportuser',
data: {
email: this.email,
useridarray: this.useridarray,
startregisterdate: this.registerstarttime,
endregisterdate: this.registerendtime
},
responsetype: 'blob'
}).then((res) => {
console.log(res)
const link = document.createelement('a')
let blob = new blob([res.data],{type: 'application/vnd.ms-excel'});
link.style.display = 'none'
link.href = url.createobjecturl(blob);
let num = ''
for(let i=0;i < 10;i++){
num += math.ceil(math.random() * 10)
}
link.setattribute('download', '用户_' + num + '.xlsx')
document.body.appendchild(link)
link.click()
document.body.removechild(link)
}).catch(error => {
this.$notice.error({
title: '错误',
desc: '网络连接错误'
})
console.log(error)
})
这里为了方便做记录，我是直接在页面中使用axios发送了个post请求。
仔细看axios请求加了个responsetype: 'blob'配置，这是很重要的
可以看一下请求成功之后返回的数据：
可以看到请求返回了一个blob对象，你如果没有正确的加上responsetype: 'blob'这个参数，返回的就不是个blob对象，而是字符串了。
接下来就是将返回的blob对象下载下来了：
const link = document.createelement('a')
let blob = new blob([res.data],{type: 'application/vnd.ms-excel'});
link.style.display = 'none'
link.href = url.createobjecturl(blob);
let num = ''
for(let i=0;i < 10;i++){
num += math.ceil(math.random() * 10)
}
link.setattribute('download', '用户_' + num + '.xlsx')
document.body.appendchild(link)
link.click()
document.body.removechild(link)
上面这段代码重要的就一句：let blob = new blob([res.data],{type: ‘application/vnd.ms-excel'});
其余的看看就行了。
以上就是全部的vue导出excel前后端代码了。
导入excel功能
其实对于这个导入excel没有什么好说的，就和你没采用前后分离时使用springmvc导入excel表格一样。vue前端导入excel代码和vue上传图片的代码没有区别，就是将excel文件传到后台，之后就是后台处理文件的逻辑了，这个就不具体写了，因为和以前没区别。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论