以编程方式单击 <a>-tag 在 Firefox 中不起作用答案

【问题标题】：Programmatical click on <a>-tag not working in Firefox以编程方式单击 <a>-tag 在 Firefox 中不起作用
【发布时间】：2015-11-20 10:48:38
【问题描述】：

我对 jquery 的 click()-function 有疑问。我用document.createElement('a') 创建了一个<a>-element，并想调用关于这个元素的click()-function。关于这个元素，我想创建一个 Excel 文件并将其保存在桌面上。

我的代码：

$('body').on('click', '#test', function(event) {
    var link = document.createElement('a');
    link.download = 'test.xls';
    link.href = 'data:application/vnd.ms-excel;utf-8,test';
    link.click();
});

此功能在 chrome 下有效，但在 Firefox 下无效。

Working example

有人知道为什么这不起作用吗？

【问题讨论】：

这适用于我在 Ubuntu 上的 Firefox 72.0.2 上。谁能提供一些资源的链接以确认更改？

标签： javascript jquery firefox click

【解决方案1】：

在 Firefox 中，您可以将创建的元素显式添加到 DOM 中，它会起作用：

$('body').on('click', '#test', function(event) {
    var link = document.createElement('a');
    // Add the element to the DOM
    link.setAttribute("type", "hidden"); // make it hidden if needed
    link.download = 'test.xls';
    link.href = 'data:application/vnd.ms-excel;utf-8,test';
    document.body.appendChild(link);
    link.click();
    link.remove();
});

Fiddle

【讨论】：

@WhistleWhite 太棒了！也许您可以通过单击复选标记来“接受”我的回答。 :)
@lurker var anchor=document.createElement('a') 将在 firefox 和 chrome 中提供 var anchor=<a> var anchor='' 。因为Firefox中没有右括号，这就是为什么你不能执行点击方法？？？
在 Firefox 中有没有其他方法可以做到这一点？（我不想将链接附加到正文）
将类型设置为隐藏似乎没有任何效果。
自 2017 年 6 月 1 日起适用于 Firefox 和 Chrome，但不适用于 Safari

【解决方案2】：

您不必将元素添加到 DOM，即使在 FireFox 中也是如此。将 .click() 方法替换为以下代码：

link.dispatchEvent(new MouseEvent(`click`, {bubbles: true, cancelable: true, view: window}));

$('button').on('click', function(event) {
    var link = document.createElement('a');
    link.download = 'test.xls';
    link.href = 'data:application/vnd.ms-excel;utf-8,test';
    link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Download</button>

【讨论】：

这是2018年比较优雅的解决方案。我在Chrome、Firefox和Safari中测试过。
第二个参数真的需要吗？它只适用于我的 link.dispatchEvent(new MouseEvent('click'));，所以我会坚持下去，还是会有一些我会想念的东西？
轻松解决我的问题。简洁且适用于迄今为止我测试过的所有浏览器。 Chrome、Firefox、Edge、Opera
@Álvaro González 它确实有效。这是我在我的一个组件中使用的，到目前为止，客户在下载它时没有任何问题，但我意识到它可能与 polyfills 有关。我已经有一段时间没有使用那个解决方案了。
@ÁlvaroGonzález 抱歉，我刚刚重新检查了我的项目；实施确实存在问题。我不知道是什么原因，我不得不稍微改变一下我使用它的方式。我认为 IE 11 存在问题。

【解决方案3】：

在触发点击之前将元素添加到 DOM：

document.body.appendChild(link);
link.click();
document.body.removeChild(link);

这在所有主要浏览器中都适用于我

【讨论】：

【解决方案4】：

您可以使用 jquery 来创建元素。它适用于两种浏览器

$(document).on('click', '#test', function (event) {
    var link = $("<a/>", {
        "download": "test.xls",
        "href": "data:application/vnd.ms-excel;utf-8,test"
    });
    $("#test").append(link);
    link.get(0).click();
});

Fiddle

【讨论】：

这是一个无限循环！

【解决方案5】：

  var fileUrl=document.createElement('a');
      fileUrl.href=response.request.responseURL;
      document.body.appendChild(fileUrl);
      fileUrl.click();

添加文档正文，这样就可以了

【讨论】：