vue导入excel进度条_Vue结合后台导入导出Excel问题详解
最近Vue项目中用到了导入导出功能,在网上搜索了一番之后,决定采用Blob方式,这也是大家推荐的一种的方式,特此做下记录。
导出Excel功能
这里不谈别人怎么实现的,我是从后台生成了Excel流文件返回给前端的。
下面具体看一下后台的代码:
/**
* 批量导出用户
* @param condition
* @param response
*/
@PostMapping("/exportUser")
public void exportUser(@RequestBody UserQueryCondition condition,HttpServletResponse response){
XSSFWorkbook book = new XSSFWorkbook();
try {
List 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文件传到后台,之后就是后台处理文件的逻辑了,这个就不具体写了,因为和以前没区别。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
vue导入excel进度条_Vue结合后台导入导出Excel问题详解相关推荐
- vue导入excel进度条_Vue 前端开发——导入Excel/Csv
项目开发中遇到导入表格常见的就是excel和csv 格式,一般情况下我们会前端首先得到这个表格里面的数据,然后再把数据发送给后端,也有的是直接上传文件传给后台后台自己处理,这样就不好控制上传前预览和处 ...
- vue导出excel加一个进度条_Vue实现在前端导出Excel
安装依赖 进入项目文件夹,打开cmd或者在Webstorm中的Terminal中输入: npm install -S file-saver xlsx npm install -D script-loa ...
- vue导入excel进度条_vue中使用excel导入导出
importfxx(obj) { let _this= this; let inputDOM= this.$refs.inputer;//通过DOM取文件数据 this.file = event.cu ...
- vue 圆形百分比进度条_vue实用组件——圆环百分比进度条
有需要的人可以参考一下,如果试用过,发现问题,欢迎留言告知,不胜感激. 功能介绍: 1.若页面无刷新,且第一次传值小于第二次传值或者圆环初始化时执行的是递增动画 2.若页面无刷新,且第一次传值大于第二 ...
- java excel进度条_导出excel 用easyui显示进度条(也适用于其他框架遮罩层,进度条)...
每次我们导出excel的时候 ,如果数据量很大,导出花费的时间会很长,页面却有没人任何反应,这个时候用户会认为系统有问题,要么关了页面,要么狂点导出.感知太差了~甚至用户误操作会导致服务器崩溃. 所以 ...
- vue 视频 时间进度条组件
vue 视频 时间进度条组件 有些视频是以视频流的形式进行渲染的,没有视频滚动条,所以就写了24h的时间组件 实现思路: 1,24h的时间刻度线总宽度为12960px 2,点击24h线的某一点,获取这 ...
- vue 视频 时间进度条组件-使用npm组件
vue 视频 时间进度条组件 有些视频是以视频流的形式进行渲染的,没有视频滚动条,所以就写了24h的时间组件 组件已上传到npm上,npm i as-time-line下载安装即可,最少需要1.2.0 ...
- Excel导出带图片详解
Excel导出带图片详解 导出模板 一.引入的jar <dependency><groupId>org.apache.poi</groupId><artifa ...
- IOS之RSA加密解密与后台之间的双向加密详解
IOS之RSA加密解密与后台之间的双向加密详解 序言 因为项目中需要用到RSA加密,刚开始也是有点乱,这两天也整理的差不多了,希望能帮到大家. 这次先上代码,我想大部分人肯定是着急解决问题,所以不要废 ...
最新文章
- 一个PHP的HTTP POST方法
- Asp.net中Json数据的转化,读取与应用
- ubuntu用不了root用户:~$ su - root Password: su: Authentication failure怎么办?
- vc设置窗口在另一个窗口前面_日常办公如何设置IE
- 基于.Net Remoting的项目总结报告
- shell与python的优劣_论python 和 shell的实用性
- linux C 应用消息队列在两个进程间通信
- Pandas dataframe列名重命名
- Java学习笔记(二)Java基本语法
- Meltdown和Foreshadow等补丁被指不完整,处理器易受新攻击
- 双向链表中基本函数的实现
- 在Android 6.0 Marshmallow(API 23)上弃用了getColor(int id)
- [Xcode 实际操作]四、常用控件-(12)环形进度条控件的使用
- 微信小程序代码大全 - 小程序开发福利
- rk3399 rt5640 录音调试记录
- STM32L4系列二、STM32CubeMX 图形配置工具基本操作过程
- 笔记——H.264/AVC与H.265/HEVC基本总结
- 用python绘制家乡汕头的地标建筑
- S32V234专业级AVM全景+ADAS解决方案
- css加透明边框,CSS3实现透明边框的方法分享