触发点击带有“下载”属性的链接答案

【问题标题】：Trigger click on link with 'download' attribute触发点击带有“下载”属性的链接
【发布时间】：2016-08-12 22:33:09
【问题描述】：

我有一些这样的链接：

<a class="download-link" href="/some/file.mp3" download="file.mp3">download></a>

当点击此链接时，文件被无提示下载。

我正在尝试制作“全部下载”按钮，但我失败了，因为点击这些链接似乎无法触发。

例如：

$($("a[download]")[0]).trigger("click")
// this shows no error, but the file is not actually downloaded

根据 2013 年的this article，可以触发 Chrome 中的下载链接点击。这已经被弃用了吗？有其他方法吗？

顺便说一句，我使用的是 Chrome 52。理想情况下，我会找到适用于 Android 版 Chrome 的东西。

我怀疑这是不可能的，因为网站可以根据需要下载各种恶意文件。但是，由于“全部下载”按钮是一个常见的用例，我想知道是否有一些可行的方法。我不需要触发初始点击 - 用户将点击“全部下载”按钮，这将触发后续点击。

要亲自尝试，请转到 https://maxpleaner.github.io/my_music/ 并在控制台中键入以下脚本：$($("a[download]")[0]).trigger("click")

【问题讨论】：

如果不起作用，您可以考虑使用 window.open 并确保服务器正在发送文件的 mime 类型以强制下载。
@j_mcnally 我正在使用静态服务器 - github 页面。不确定在这种情况下如何设置 mime 类型。使用 rawgit 我为我的一个 mp3 获得了 this url，但它会播放这首歌而不是下载它。
实际上您的代码因以下错误而失败：Cannot read property 'trigger' of null(...);你的后端是用php写的？
好吧，我的错。我看到您使用的是 3.x。我尝试将 ID 添加到元素，然后使用 vanilla js 触发点击。如果您可以使用循环编辑 DOM，为每个“可下载”链接添加增量 id，那么您可以循环所有链接并触发 .click()
@Caius 谢谢 - rvighne 的回答中也建议使用香草 js。

【解决方案1】：

我不确定 jQuery 是如何做到的，但以下 vanilla JavaScript 成功下载了页面上的每个链接：

for (let link of document.querySelectorAll('a[download]'))
    link.click();

Chrome 会提示我是否要下载多个文件，并且它可以正常工作。

尽管您可能希望在执行此操作之前警告用户，因为这会使浏览器有些迟钝。

【讨论】：

不幸的是，它似乎不适用于我的 android 手机的 chrome。我有一个黑莓隐私。
@maxpleaner 是的，移动浏览器可能没有桌面浏览器所具备的一些新功能。在这种情况下，您可能不走运...（除非您有提供下载的后备服务器端方法）。
原来它适用于 Ghostery android 浏览器，但不适用于 Chrome android 或“Chrome Dev”android。
@maxpleaner 您正在测试它的浏览器可能不支持我在此答案中使用的 ES6 功能。如果是这样，试试这个等效的 ES5 代码：Array.prototype.forEach.call(document.querySelectorAll('a[download]'), function (link) { link.click(); });

【解决方案2】：

您在“.download-link”中错过了 CLASS 的一个点

$($(".download-link")[0]).trigger("click")

【讨论】：

虽然您说错字是正确的，但添加点并不能解决问题。要亲自尝试，请转到 https://maxpleaner.github.io/my_music/ 并在控制台中键入以下脚本：$($("a[download]")[0]).trigger("click")