自动多次下载不再适用于Chrome

Question

我们生产基于浏览器的通信软件,公司用于咨询.在咨询结束时,顾问可以下载视频流的录像.由于Chrome已更新至65版,因此多文件下载仅提供最后一个文件.

我们显示已保存会话的列表,当用户点击"下载"时,我们循环浏览该会话的所有记录,并像在此SO解决方案中一样下载它们: JavaScript blob文件名没有链接

var saveBlobAs = function(blob, filename){
        var url = window.URL.createObjectURL(blob);

        var a = document.createElement('a');
        document.body.appendChild(a);
        a.style = 'display: none';
        a.href = url;
        a.download = filename;
        a.click();
        window.URL.revokeObjectURL(url);
    };

for(var i = 0; i < matchedRecordings.length; i++){
        var recording = matchedRecordings[i];
        saveBlobAs(recording.blob, fileName);
    }

代码仍然可以在FireFox上完美运行,但Chrome 65只提供最后一个文件.我可以通过将链接创建更改为来修复它

var a = document.createElement('a');
document.body.appendChild(a);
a.style = 'display: none';
a.href = url;
a.target = '_BLANK'; // Added this
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);

但现在Chrome将其视为弹出窗口并为每个文件打开新标签.

还有其他人有同样的问题吗？有没有比在新标签中打开每个链接更好的解决方案？

Answer 1

我认为你只需要添加一个暂停来绕过 chrome 检测多个下载。这是一个带有和不带有暂停的按钮的示例。

我从来没有遇到过“只有最后一个文件”的问题，但它确实在第十个文件之后停止了。添加暂停使所有下载对话框出现（chrome 68）。

摆脱并使用（或者某种可怕的回调东西，如果你需要支持<ES6）target来实现循环。awaitPromise

因此，您可以使用 进行调用saveBlobs(matchedRecordings, 200)，但您可能需要稍微更改一下函数，因为您的数据.blob显然具有 a 并且全部共享相同的文件名。

async function saveBlobs(blobs, wait) {
  for (let blob of blobs) {
    saveBlob(blob[0], blob[1]);
    if (wait)
      await new Promise(resolve => setTimeout(() => resolve(), wait));
  }
}

function saveBlob(blob, name) {
  //create the initiator
  var download = document.createElement('a');
  download.href = URL.createObjectURL(blob);
  download.download = name;

  //fire it off
  document.body.appendChild(download);
  download.click();
  setTimeout(() => download.remove());
}