ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端下载文件流（可暂停、取消、查看进度） [打印本页]

---

作者: 小秦哥    时间: 2024-7-17 23:13
标题: 前端下载文件流（可暂停、取消、查看进度）

1.   <el-button type="primary" icon="Download" plain @click="handleDownload('batch')">下载</el-button>

复制代码

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

1. // 下载
2. const handleDownload = async row => {
3.     if (selectedData.value && selectedData.value.length != 0) {
4.       selectedData.value.forEach(item=>{
5.         downloadFileAuthentication(item.propertyId).then(res => {
6.           downloadFileHref(item.propertyId).then(res => {
7.             const blob = new Blob([res], { type: 'application/zip' })
8.             const link = document.createElement('a')//创建a标签
9.             link.download = item.propertyName//a标签添加属性
10.             link.style.display = 'none'
11.             link.href = URL.createObjectURL(blob)
12.             document.body.appendChild(link)
13.             link.click()//执行下载
14.             URL.revokeObjectURL(link.href) //释放url
15.             document.body.removeChild(link)//释放标签
16.           })
17.         })
18.       })
19.       
20.     } else {
21.       ElMessage.warning('请先选择操作数据');
22.     }
23. }

复制代码

2、 window.location.href下载（有进度条，可取消、暂停。缺点：一次只能下载一条，不支持批量下载）（这里后端get哀求方式传参）

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

复制代码

3、iframe下载（有进度条，可取消、暂停，支持同时下载多个）

1. const handleDownload = async row => {
2.     if (selectedData.value && selectedData.value.length != 0) {
3.       selectedData.value.forEach(item=>{
4.         downloadFileAuthentication(item.propertyId).then(res => {
5.           downloadFileHref(item.propertyId).then(res => {
6.                        var url = `/ca/download/downloadFile?propertyId=${item.propertyId}`;  // 文件地址
7.                   var iframe = document.createElement('iframe')
8.                   iframe.src = ` ${downLoadUrl + url}&token=${getToken()}`
9.                   iframe.style.display = 'none'
10.                   iframe.onload = function () {
11.                     document.body.removeAttribute(iframe)
12.                   }
13.                   document.body.appendChild(iframe)
14.           })
15.         })
16.       })
17.       
18.     } else {
19.       ElMessage.warning('请先选择操作数据');
20.     }
21. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4