js文件下载进度条实现

/**
* 下载
* @param  {String} url 目标文件地址
* @param  {String} filename 想要保存的文件名称
*/
download(url: string, filename: string) {
   this.getBlob(url).then(blob => {
       this.saveAs(blob, filename);
   });
}

/**
 * 获取  blob
 * @param  {String} url 目标文件地址
 * @return {Promise}
 */
getBlob(url: string) {
    return new Promise(resolve => {
        let that = this; // 创建XMLHttpRequest，会让this指向XMLHttpRequest，所以先接收一下this
        const xhr = new XMLHttpRequest();

        xhr.open("GET", url, true);

        //监听进度事件
        xhr.addEventListener(
            "progress",
            function(evt) {
                if (evt.lengthComputable) {
                    let percentComplete = evt.loaded / evt.total;
                    that.percentage = percentComplete * 100;

                    // console.log('percentComplete 0 ---------------');
                    // console.log(percentComplete);
                    // console.log(that.percentage);
                    // const dom1: any = document.querySelector('#percentage_tm_drawer');
                    // console.log(dom1);
                    // console.log(this);
                    // console.log(env);
                    // console.log('percentComplete 1 ---------------');
                    // console.log(dom1['percentage']);
                    // dom1['percentage'] = percentComplete * 100;
                    // console.log(dom1['percentage']);
                    // $("#progressing").html((percentComplete * 100) + "%");
                }
            },
            false
        );

        xhr.responseType = "blob";
        xhr.onload = () => {
            if (xhr.status === 200) {
                resolve(xhr.response);
            }
        };
        
        xhr.send();
    });
}

/**
 * 保存
 * @param  {Blob} blob
 * @param  {String} filename 想要保存的文件名称
 */
saveAs(blob: any, filename: string) {
    // ie的下载
    if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
    } else {
        // 非ie的下载
        const link = document.createElement("a");
        const body: any = document.querySelector("body");

        link.href = window.URL.createObjectURL(blob);
        link.download = filename;

        // fix Firefox
        link.style.display = "none";
        body.appendChild(link);

        link.click();
        body.removeChild(link);

        window.URL.revokeObjectURL(link.href);
    }
}