[JavaScript知识库]监听文件下载过程，并提示文件下载完成

这些代码是复制的，对原代码添加了一些注释，原网址在最底部

const xhr = new XMLHttpRequest();// 创建xhr对象
xhr.open('GET', baseUrlFun() + response.path);// 以get形式从后端将文件下载到本地内存，第二个参数是地址（如：/abc-api/aaaad/select/ab_2054654_UGIUG_245687684654.zip）
xhr.send(null);
// 设置服务端的响应类型
xhr.responseType = "blob";
// 监听下载
xhr.addEventListener('progress', event => {
	// 计算出百分比
	const percent  = ((event.loaded / event.total) * 100).toFixed(2);
	console.log(`下载进度：${percent}`);
}, false);
xhr.onreadystatechange = event => {
    if (xhr.status == 200){// 是否已下载到内存
      
      // 文件名称（自定义）
      const fileName = this.$store.state.user.shpname;
      
      // 创建一个a标签用于下载（固定写法）
      const donwLoadLink = document.createElement('a');
      donwLoadLink.download = fileName;
      donwLoadLink.href = URL.createObjectURL(xhr.response);
      
      // 触发下载事件，将从后端保存到内容的文件下载到到磁盘
      donwLoadLink.click();
      
      // 释放内存中的资源
      URL.revokeObjectURL(donwLoadLink.href);
      console.log(下载完成)
    } else if (response.status == 404){
      alert(`文件：${file} 不存在`);
    } else if (response.status == 500){
      alert('系统异常');
    }
}

源自：https://www.programminghunter.com/article/51952189295/