在项目中经常会有下载文件的需求,大多数时候我都是一个a标签或者window.location.href = "";一行代码搞定,但是最近有一个文件下载需求,因为下载的文件有点大,所以速度确实慢,基本以10m+才能下载下来,所以做了一个进度条,然后问题来了,怎么可以监听文件是否下载完成,然后取消掉进度条。。。
开始折腾了半天的jquery,整不成,决定用原生ajax写,其中也自己整理了几种方法,特此记录哈
第一种方法:原生ajax+FileReader
$("#execlTo_btn").on("click",function(){
var itime = 0;
$(btn).attr("disabled", "disabled");
$(btn).html(`正在下载<i style="color:blueviolet;">${itime}</i>`);
var hurl = `yjToExel?yjjb=123`;
var xhr = new XMLHttpRequest();
xhr.open('get', hurl, true);
xhr.responseType = "blob";
xhr.onload = function() {
if (this.status === 200) {
var blob = this.response;
var reader = new FileReader;
reader.readAsDataURL(blob);
reader.onload = function(e) {
var headerName = xhr.getResponseHeader("Content-disposition");
var fileName = decodeURIComponent(headerName).substring(20);