异步下载文件 java_在浏览器中异步下载文件监听下载进度
在浏览器中异步下载文件,其实就是把服务器响应的文件先保存在内存中。然后再一次下载到磁盘。第二次下载过程,就是把内存的数据IO到磁盘,没有网络开销。速度极快。
之所以要先保存在内存,主要是可以在下载开始之前和下载结束后可以做一些业务逻辑(例如:校验,判断),还可以监听下载的进度。
演示
这里演示一个Demo,在点击下载摁钮后,弹出加loading框。在读取到服务器的响应的文件后。关闭loading框。并且在控制台中输出下载的进度。
有点像是监听文件下载完毕的意思,也只能是像。从内存IO到磁盘的这个过程,JS代码,再也无法染指过程。更谈不上监听了。
Controller
服务端的下载实现
import java.io.BufferedInputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
@RequestMapping("/download")
public class DownloadController {
@GetMapping
public void download (HttpServletRequest request,
HttpServletResponse response,
@RequestParam("file") String file) throws IOException {
Path path = Paths.get(file);
if (Files.notExists(path) || Files.isDirectory(path)) {
// 文件不存在,或者它是一个目录
response.setStatus(HttpServletResponse.SC_NOT_FOUND);
return ;
}
String contentType = request.getServletContext().getMimeType(file);
if (contentType == null) {
// 如果没读取到ContentType,则设置为默认的二进制文件类型
contentType = "application/octet-stream";
}
try (BufferedInputStream bufferedInputStream = new BufferedInputStream(Files.newInputStream(path))){
response.setContentType(contentType);
response.setHeader("Content-Disposition", "attachment; filename=" + new String(path.getFileName().toString().getBytes("GBK"), "ISO-8859-1"));
// 关键点,给客户端响应Content-Length头,客户端需要用此来计算下载进度
response.setContentLengthLong(Files.size(path));
OutputStream outputStream = response.getOutputStream();
byte[] buffer = new byte[8192];
int len = 0;
while ((len = bufferedInputStream.read(buffer)) != -1) {
outputStream.write(buffer, 0, len);
}
} catch (IOException e) {
}
}
}
Index.html
异步下载
开始下载
function downlod(){
const file = document.querySelector('#file').value;
if (!file){
alert('请输入合法的文件地址');
}
// 打开加载动画
const index = layer.load(1, {
shade: [0.1,'#fff']
});
const xhr = new XMLHttpRequest();
xhr.open('GET', '/download?file=' + encodeURIComponent(file));
xhr.send(null);
// 设置服务端的响应类型
xhr.responseType = "blob";
// 监听下载
xhr.addEventListener('progress', event => {
// 计算出百分比
const percent = ((event.loaded / event.total) * 100).toFixed(2);
console.log(`下载进度:${percent}`);
}, false);
xhr.onreadystatechange = event => {
if(xhr.readyState == 4){
if (xhr.status == 200){
// 获取ContentType
const contentType = xhr.getResponseHeader('Content-Type');
// 文件名称
const fileName = xhr.getResponseHeader('Content-Disposition').split(';')[1].split('=')[1];
// 创建一个a标签用于下载
const donwLoadLink = document.createElement('a');
donwLoadLink.download = fileName;
donwLoadLink.href = URL.createObjectURL(xhr.response);
// 触发下载事件,IO到磁盘
donwLoadLink.click();
// 释放内存中的资源
URL.revokeObjectURL(donwLoadLink.href);
// 关闭加载动画
layer.close(index);
} else if (response.status == 404){
alert(`文件:${file} 不存在`);
} else if (response.status == 500){
alert('系统异常');
}
}
}
}
现在的ajax请求,几乎都是用ES6的fetch,支持异步,而且代码也更优雅。API设计得更合理。但是目前为止,好像fetch并没有progress事件,也就说它不支持监听上传下载的进度。所以没辙,还是得用XMLHttpRequest。
最后
这种方式弊端也是显而易见,如果文件过大。那么内存就炸了。我觉得浏览器应该暴露一个js的接口。允许通过异步的方式直接下载文件IO到磁盘,通过回调给出下载的进度,IO的进度。
异步下载文件 java_在浏览器中异步下载文件监听下载进度相关推荐
- 报表XML导出rtf格式,结果在浏览器中打开XML文件。下载rtf文件打开后出现Authentication failed 问题
报表XML导出rtf格式,结果在浏览器中打开XML文件.下载rtf文件打开后出现Authentication failed 问题 直接上问题图: 问题描述:在Oracle EBS中执行"资源 ...
- java根据Freemarker模板渲染出Excel文件并在浏览器中下载
**java根据Freemarker模板渲染出Excel文件并在浏览器中下载** 准备工作 1.导入的依赖 2.创建模板 Freemrker语法大全: [Freemarker语法使用请点击该链接跳转学 ...
- 如何在Web浏览器中查看XML文件
一旦了解到HTML是XML的一种形式,您可能会想知道如果尝试在浏览器中查看XML文件会发生什么. 结果令人非常失望-Firefox在页面顶部显示一条横幅,上面写着:"此XML文件似乎没有与之 ...
- IE浏览器中选择本地文件
IE浏览器中选择本地文件源码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="content- ...
- 浏览器中预览文件(pdf、图片文件)
本文讲解在浏览器中预览PEF文件或图片文件,思路如下: 使用window.fetch请求文件资源,生成blob对象,创建此blob对象的url,之后在浏览器中显示预览,下面是具体实现代码: 1.单击& ...
- 解决:利用IDEA的右上角图标打开jsp文件,在浏览器中打开的是“本机文件路径”,而不是“http路径”问题
解决:利用IDEA的右上角图标打开jsp文件,在浏览器中打开的是"本机文件路径",而不是"http路径"问题 一·问题描述: 二·错误原因: 三·解决方法: 方 ...
- maven没有resource文件夹_maven项目中没有resource文件夹的问题
之前使用eclipse创建maven项目,文件夹都是建好的,这几次创建,都没有resource文件夹,需要手动创建resource. 现象描述 在eclipse中,创建maven项目有两种方式: 一种 ...
- wp文件转shp_完美实现从mapGIS文件转换成ArcGIS中shp格式文件
完美实现从 mapGIS 文件转换成 ArcGIS 中 shp 格式文件 最近经苦战实验,终于找到如何完美实现从 mapGIS 文件转换成 ArcGIS 中 shp 格式文件.步骤如下(各步骤中细节操 ...
- js下载文件 监听下载完成事件
<script src="xxx/layui/layui.js"></script> <script src="xxx/jquery.min ...
最新文章
- css圆角矩形及去掉空格属性
- redis和memcache的区别
- pycharm提示 Method 'xxx' may be 'static'(类方法与静态方法)
- Struts 2基础入门
- 25q64存储多个数据_一篇文章看懂,存储虚拟化在不同用例中的实践与优势
- html语言文本框的符号,如何将文本框中的值作为HTML字符串提交?
- HDU ACM 1224 Free DIY Tour (SPFA)
- 已完成私有化交易 “网红第一股”如涵退市
- KeyMob-打造国内优秀的移动广告平台
- 计算连续登陆最大天数
- linux把虚拟机上的文件共享,[转]windows中vmware虚拟机中的Linux如何进行文件的共享...
- spark map函数中使用println无法输出
- 计算机网络最出优秀,职业高中计算机网络案优秀教案.doc
- 全国计算机等级一级考试套题,全国计算机等级考试一级试题及答案(10套)
- HCIA-RS(211-中文题库,2019最新题库)
- penghui_031413 Bat命令学习
- 关于Chrome不能上网问题
- 世间安得双全法,不负如来不负卿
- swagger屏蔽某些接口
- python版飞机大战及码源
热门文章
- 电脑关机或重启C盘数据被清空还原问题
- Electron执行electron-builder打包命令报错
- 瑞芯微RK3188方案 RK3188方案定制 RK3188性能如何 RK3188软硬件设计定制 RK3188评测
- bert系列第二篇:几个损失函数
- 基于android的家教一点通(家教帮)app
- 常用Android模拟器端口号(adb链接)
- U盘误格式化后恢复操作
- MATLAB 图片三角风格化(low poly)
- php 调用 坐标拾取,坐标拾取 · thinkphp5学习笔记 · 看云
- 快速搭建一个自己的服务器详解(java环境)