监听文件下载过程,并提示文件下载完成

此功能是从别处借鉴,对原代码添加了一些注释,原网址在最底部

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/

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值