# js 文件下载(ie兼容)
特点
- 可自定义进度条(需返回content-length)
- 通过响应的状态码
Status Code可判断是否下载成功 - 可解决直接使用
a标签下载引起的跨域问题
# 什么是 content-length🤔
- Content-Length 是一个实体消息首部,用来指明发送给接收方的消息主体的大小,即用十进制数字表示的八位元组的数目。我们需要后端返回content-length告诉前端文件大小,以便于前端做进度条
- 在xhr请求过程中调用的周期性函数
onprogress的参数event.total就等于content-length,结合event.loaded就可以做个进度条啦!😁
var xhr = new XMLHttpRequest();
var link = document.createElement('a');
xhr.open('GET', 'http://127.0.0.1:8083/1.png')
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.responseType = "blob";
xhr.onprogress = function (event) {
if (event.lengthComputable) {
console.log('loaded',event.loaded);
console.log('total',event.total); }
};
xhr.onload = function (oEvent) {
console.log(oEvent);
console.log(xhr.status);
console.log(xhr.response);
if (xhr.readyState === 4 && xhr.status === 200) {
/** ie兼容性 */
if (window.navigator.msSaveOrOpenBlob) {
var blob = new Blob([xhr.response], {type: 'jpeg/png'});
window.navigator.msSaveOrOpenBlob(blob, '123.jpeg' )
return
}
var isBlob = xhr.response instanceof Blob;
var blob = new Blob([xhr.response], {type: 'jpeg/png'});
var csvUrl = URL.createObjectURL(blob);
link.href = csvUrl;
link.download = 'v.png';
link.click();
//需要释放,防止内存泄漏
URL.revokeObjectURL(csvUrl)
}
}
xhr.send();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32