前端下载文件成功后执行回调的方法

2019独角兽企业重金招聘Python工程师标准>>>

在项目中经常会有下载文件的需求，大多数时候我都是一个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);