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

Question

我有click()来自jquery 的-function 的问题.我创建了一个<a>-element,document.createElement('a')并希望调用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下运行.

工作实例

有谁知道为什么那不起作用？

Answer 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();
});

小提琴

Answer 2

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

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

Answer 3

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

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

这对所有主要浏览器都有效

Answer 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();
});

小提琴