js 文件下载进度监控

js通过a标签或者link下载csv文件时，不能实时监听到是否下载完成，有时文件很大体验效果很不好，需要加一个遮罩层之类，故采用发送XMLHttpRequest请求的方式。

 1     var xhr = new XMLHttpRequest();
 2     xhr.open('GET', '文件地址.mp4');
 3     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 4     xhr.responseType = "blob";
 5     xhr.onprogress = function (event) {
 6         if (event.lengthComputable) {
 7             console.log(event.loaded);
 8             console.log(event.total);12         }
13     };
14     xhr.onload = function (oEvent) {
15         console.log(oEvent);
16         console.log(xhr.status);
17         console.log(xhr.response);
18         if (xhr.readyState === 4 && xhr.status === 200) {
19             // var name = xhr.getResponseHeader("Content-disposition");
20             // var filename = name.substring(20,name.length);
21             var blob = new Blob([xhr.response], {type: 'video/mp4'});
22             var csvUrl = URL.createObjectURL(blob);
23             var link = document.createElement('a');
24             link.href = csvUrl;
25             link.download = 'abababababba.mp4';
26             link.click();          
27         }
28     }
29     xhr.send();

附：
https://blog.csdn.net/qq_35530005/article/details/103381205