实时获取文件下载的速度

发表于 | 分类于

以Chrome为例，在网页下载文件的时候，一般情况下都是点击一个链接，然后浏览器底部就会出现一条下载的任务。
但是有些产品的页面为了用户有更完整的体验，会在页面内实现一个实时的进度条。具体做法就是利用XMLHttpRequest对象的onprogress回调来实现。

完整代码如下：

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
const downloadURL = (url) => {
    const xmlhttp = new XMLHttpRequest();
    xmlhttp.open('GET', url, true);
    xmlhttp.responseType = 'blob';
    xmlhttp.onprogress = function (event) {
        // 输出进度
        console.log(event.loaded / event.total);
    };
    xmlhttp.send();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          	//需要知道下载的文件格式
          	if (msie) {
              	navigator.msSaveOrOpenBlob(blob, name);
              	return;
          	}
            var blob = new Blob([xmlhttp.response], {type: 'image/png'});
            var url1 = URL.createObjectURL(blob);
            let dllink = document.getElementById('dllink');
            if (dllink === null) {
                dllink = document.createElement('a');
                dllink.id = 'dllink';
              	// 需要知道文件的名字
                dllink.download = 'name.bmp';
                dllink.href = url1;
                document.body.appendChild(dllink);
            }
          	// 触发点击事件
            dllink.click();
        }
　　 };
}

需要注意的是：因为下载过程中文件是在内存中的，Blob的大小不能超过500MB。

0%