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

Zeosky / 2023-08-29 / 原文

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

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

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

2. 解决方法二

  通过iframe解决

  

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标签解决