前端下载文件流(可暂停、取消、查看进度)

前端下载文件流(可暂停、取消、查看进度)

码农世界 2024-06-04 前端 96 次浏览 0个评论
  下载

1、a标签下载(没有进度条,接口走完前端才有反应,下载大文件时用户体验不好,适用下载小文件)

// 下载
const handleDownload = async row => {
    if (selectedData.value && selectedData.value.length != 0) {
      selectedData.value.forEach(item=>{
        downloadFileAuthentication(item.propertyId).then(res => {
          downloadFileHref(item.propertyId).then(res => {
            const blob = new Blob([res], { type: 'application/zip' })
            const link = document.createElement('a')//创建a标签
            link.download = item.propertyName//a标签添加属性
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            document.body.appendChild(link)
            link.click()//执行下载
            URL.revokeObjectURL(link.href) //释放url
            document.body.removeChild(link)//释放标签
          })
        })
      })
      
    } else {
      ElMessage.warning('请先选择操作数据');
    }
}

2、 window.location.href下载(有进度条,可取消、暂停。缺点:一次只能下载一条,不支持批量下载)(这里后端get请求方式传参)

const handleDownload = async row => {
  const url = `/ca/download/downloadFile?propertyId=${row.propertyId}`;
  downloadFileAuthentication(row.propertyId).then(res => {
    if (res.code == 200) {
      window.location.href = ` ${downLoadUrl + url}&token=${getToken()}`
    }
  })
};

3、iframe下载(有进度条,可取消、暂停,支持同时下载多个)

const handleDownload = async row => {
    if (selectedData.value && selectedData.value.length != 0) {
      selectedData.value.forEach(item=>{
        downloadFileAuthentication(item.propertyId).then(res => {
          downloadFileHref(item.propertyId).then(res => {
       		var url = `/ca/download/downloadFile?propertyId=${item.propertyId}`;  // 文件地址
	          var iframe = document.createElement('iframe')
	          iframe.src = ` ${downLoadUrl + url}&token=${getToken()}`
	          iframe.style.display = 'none'
	          iframe.onload = function () {
	            document.body.removeAttribute(iframe)
	          }
	          document.body.appendChild(iframe)
          })
        })
      })
      
    } else {
      ElMessage.warning('请先选择操作数据');
    }
}

转载请注明来自码农世界,本文标题:《前端下载文件流(可暂停、取消、查看进度)》

百度分享代码,如果开启HTTPS请参考李洋个人博客
每一天,每一秒,你所做的决定都会改变你的人生!

发表评论

快捷回复:

评论列表 (暂无评论,96人围观)参与讨论

还没有评论,来说两句吧...

Top