在浏览器中异步下载文件监听下载进度
在浏览器中异步下载文件,其实就是把服务器响应的文件先保存在内存中。然后再一次下载到磁盘。第二次下载过程,就是把内存的数据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
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>异步下载</title> </head> <body> <input name="name" value="D:\eclipse-jee-2019-12-R-win32-x86_64.zip" placeholder="输入你要下载的文件路径" id="file" /> <button id="button" onclick="downlod();">开始下载</button> </body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <script src="/layer/layer.js"></script> <script type="text/JavaScript"> 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('系统异常'); } } } } </script> </html>
现在的ajax请求,几乎都是用ES6的fetch,支持异步,而且代码也更优雅。API设计得更合理。但是目前为止,好像fetch并没有progress事件,也就说它不支持监听上传下载的进度。所以没辙,还是得用XMLHttpRequest。
最后
这种方式弊端也是显而易见,如果文件过大。那么内存就炸了。我觉得浏览器应该暴露一个js的接口。允许通过异步的方式直接下载文件IO到磁盘,通过回调给出下载的进度,IO的进度。
原文:https://springboot.io/t/topic/2734