Question

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

我们会显示已保存会话的列表＆amp;当用户点击＆＃34;下载＆＃34;我们遍历该会话的所有录音，并像在此SO解决方案中一样下载它们： JavaScript blob filename without link

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检测到多次下载。 Here's an example（带有和不带有暂停的按钮）。

我从未遇到“仅最后一个文件”问题，但是在第十个文件之后它确实停止了。添加暂停会显示所有下载对话框（chrome 68）。

摆脱target并使用await（或需要支持Promise回调对象）实现循环。

因此，您将使用saveBlobs(matchedRecordings, 200)进行调用，但是由于数据具有.blob并且显然都共享相同的文件名，因此您可能需要对函数进行一些更改。

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());
}

自动多次下载不再使用Chrome

1 个答案: