Question

我想在浏览器中一次下载多个文件，其中文件内容已经存在于内存中。

已有资源显示如何执行此操作：请参阅此article和downloadjs library。

我可以下载单个文件，但下载调用彼此靠近时不能复制多个文件。我附上了一个示例，显示了三个连续下载调用，其中只下载了最终文件。下面是将调用分开100毫秒的代码，它会下载所有文件。

为什么会这样？

到目前为止，我只测试了Chrome中的代码。

下载功能：

    function download(contents, filename, filetype) {
      // From: https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server
      var element = document.createElement('a');
      element.setAttribute('href', 'data:' + filetype + ',' + encodeURIComponent(contents));
      element.setAttribute('download', filename);
      element.style.display = 'none';
      document.body.appendChild(element);
      element.click();
      document.body.removeChild(element);
    }

使用示例：

  <button onclick="startDownload()">Click to download</button>
  <script>
    function startDownload() {
      download("hello 0", "hello0.txt", "text/plain");
      download("hello 1", "hello1.txt", "text/plain");
      // hello2.txt is the only one that downloads
      download("hello 2", "hello2.txt", "text/plain");
    }
  </script>

通过setTimeout()调用将下载调用分开来做什么工作。

E.g。

function downloadWrapper(contents, filename, filetype, timeoutMultiplier) {
  setTimeout(
    function() {
    download(contents, filename, filetype);
  }, timeoutMultiplier * 100);
}

// All of these download; they're spaced apart by 100 ms
downloadWrapper("hello 0", "hello0.txt", "text/plain", 0);
downloadWrapper("hello 1", "hello1.txt", "text/plain", 1);
downloadWrapper("hello 2", "hello2.txt", "text/plain", 2);

上述解决方法有效，但我不确定原因。任何想法都会非常感激。

Javascript中的多个文件下载需要超时

0 个答案: