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的进度。