admin 管理员组

文章数量: 1184232

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

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/article/51952189295/

本文标签： 文件 提示 过程 下载完成

版权声明：本文标题：监听文件下载过程，并提示文件下载完成 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1740324326a2173912.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。