通过动态创建a标签,循环批量下载文件所遇到的问题记录

1. 现象: 直接for循环动态创建a标签后,进行click事件触发下载时,你会发现浏览器只下载了最后一个文件

  原因:浏览器下载时,太快的话,会取消上次的下载

 解决方法一:可添加settimeout定时器,进行一定时间延迟,比如300毫秒,把下载触发的事件放到定时器中即可。

2. 解决方法二

  通过iframe解决

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
downloadFile(url) {
            try {
                let eleIF = document.createElement('iframe');
                eleIF.src = url;
                eleIF.style.display = 'none';
                document.body.appendChild(eleIF);
                //防止下载2次
                setTimeout(function () {
                    document.body.removeChild(eleIF)
                }, 1000);
            } catch(e) {
                console.log(e);
            }
        }
    }

3. 解决方法三:

  通过多次请求,并且请求的返回类型为 blob ,对流进行转换,然后动态创建a标签解决

posted @   张哲Zeo  阅读(786)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示