触发页面上的多个下载

Question

如何使用js / jquery在页面上触发多个下载？

使用js download属性完成个人下载。该页面有多个这样的下载链接，并希望使用全局下载全部

来触发所有这些链接

<a class="btn btn-download download-1" download="1.txt" href="#"> Download 1 </a><br>
<a class="btn btn-download download-1" download="2.txt" href="#"> Download 2 
</a><br>
<a class="btn btn-download download-1" download="3.txt" href="#"> Download 3 </a><br>

<button class="btn btn-download-all download-1" onClick='downloadAll()'> Download All </button>

$("a.btn-download").click(function(){
this.href = "data:text/plain;charset=UTF-8, Some Text" ;
});

function downloadAll(){
$( "a.btn-download" ).trigger( "click" );
}

小提琴https://jsfiddle.net/u0jhaaL3/6/

Answer 1

您正确触发了每个按钮的点击。问题是，您在设置href之前触发了点击，因此当您点击每个下载内容时，实际上正在发生 。

要解决此问题，您需要在每个下载链接的点击处理程序中再次运行this.click() 。不幸的是，这意味着如果您点击单数下载会下载该文件两次，但这可以通过将第二个参数传递给 .trigger() 来解决表示您正在尝试下载多个文件。这可以通过单击单个链接调用您的函数进行检查，但您需要使用 .on() 而不是 .click() 所以你可以检查第二个函数参数。

这可以在以下工作示例中看到：

$("a.btn-download").on("click", function(e, multiple) {
  this.href = "data:text/plain;charset=UTF-8, Some Text";
  if (multiple == 'multiple') {
    this.click();
  }
});

function downloadAll() {
  $("a.btn-download").trigger("click", ['multiple']);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="btn btn-download download-1" download="1.txt" href="#"> Download 1 </a><br>
<a class="btn btn-download download-1" download="2.txt" href="#"> Download 2 </a><br>
<a class="btn btn-download download-1" download="3.txt" href="#"> Download 3 </a><br>

<button class="btn btn-download-all download-1" onClick='downloadAll()'> Download All </button>

请注意，您将警告您正在尝试下载多个文件，因此如果您想避免这种情况，最好不要压缩文件。

Answer 2

动态生成zip下载

• https://github.com/eligrey/FileSaver.js/
• https://github.com/Stuk/jszip

基于您的代码的工作示例：

foreach

$('a.btn-download').click(function() {
  this.href = 'data:text/plain;charset=UTF-8, Some Text';
});

function downloadAll() {
  var zip = new JSZip();

  $('a.btn-download').each(function() {
    zip.file(this.download, this.text);
  });

  zip.generateAsync({
    type: 'blob'
  }).then(
    function(blob) {
      saveAs(blob, 'all.zip');
    },
    function(error) {
      console.log(error);
    }
  );
}