最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

运维笔记admin3浏览0评论

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

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/

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论