Javascript 以编程方式单击 <a>-tag 在 Firefox 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32225904/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Programmatical click on <a>-tag not working in Firefox
提问by WhistleWhite
I have a problem with the click()-function from jquery. I create a <a>-element with document.createElement('a')and want call the click()-function about this element. About this element, I want to create an Excel-file and save this at the desktop.
我对click()jquery的-function有问题。我创建了一个<a>-elementdocument.createElement('a')并想调用click()关于这个元素的-function。关于这个元素，我想创建一个 Excel 文件并将其保存在桌面上。
My code:
我的代码：
$('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();
});
This function work under chrome, but not under Firefox.
此功能在 chrome 下有效，但在 Firefox 下无效。
Does anyone have any idea why that does not work?
有谁知道为什么这不起作用？
回答by lurker
In Firefox, you can explicitly add the created element to the DOM and it will work:
在 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();
});
回答by Denis Giffeler
You don't have to add the element to the DOM, even in FireFox. Replace the .click() method with the following code:
您不必将元素添加到 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>回答by Parul
Add the element to the DOM before triggering the click:
在触发点击之前将元素添加到 DOM：
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
This worked for me in all the major browsers
这在所有主要浏览器中都对我有用
回答by Asanka Sampath
var fileUrl=document.createElement('a');
fileUrl.href=response.request.responseURL;
document.body.appendChild(fileUrl);
fileUrl.click();
add document body, thats working
添加文档正文，这正在工作
回答by Anoop Joshi
You can use jquery for creating the element. It will work on both the browsers
您可以使用 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();
});
