javascript - 触发页面上的多次下载

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

fiddle 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>

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