for循环内调用document.click触发下载仅最后一次生效如何解决？

问题根因 #

浏览器对短时间内连续触发的下载行为做了合并优化，同步循环中连续调用link.click()时，触发间隔过短，前面的下载请求会被浏览器主动中断，仅最后一次请求可以正常执行。

解决方案 #

通过异步延迟的方式控制下载触发间隔，给浏览器预留足够的请求处理时间即可，参考实现代码如下：

// 封装延迟工具函数
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function batchDownloadCanvas() {
  for(let i = 1; i <= 3; i++){
    const itemId = 'page' + i;
    const targetCanvas = document.getElementById(itemId);
    // 转换canvas为base64图片流
    const imageStream = targetCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

    // 构造下载元素
    const downloadLink = document.createElement("a");
    document.body.appendChild(downloadLink);
    downloadLink.href = imageStream;
    downloadLink.download = itemId + '.png';
    downloadLink.click();
    // 及时清理临时DOM元素
    document.body.removeChild(downloadLink);
    // 间隔300ms触发下一次下载，可根据文件大小调整时长
    await delay(300);
  }
}

// 调用函数执行批量下载
batchDownloadCanvas();

补充说明 #

如果需要下载的文件数量较多，频繁触发单独下载会影响使用体验，可以选择引入前端压缩库将所有图片打包为单个压缩包后一次导出，避免多次下载触发。

内容的提问来源于stack exchange，提问作者Toby Ya