点击“;下载”;使用JQuery的链接没有't下载文件

click on "download" link using JQuery doesn't download file

本文关键字：下载 文件 使用 JQuery 点击 链接      更新时间：2023-09-26

我有一个href和下载属性的链接：

  <a id="lnk" href="data:text/csv;charset=utf-8,1%2C2%2C3" download="my_file.csv">click to download</a>

当我点击它（例如在Chrome中）时，一个csv文件"my_file.csv"会按预期下载。

现在，我希望能够以编程方式执行此操作。所以使用JQuery我正在尝试做：

$('#lnk').click();

或

$('#lnk').trigger("click");

但是该文件没有被下载。

这是代码：http://jsbin.com/yereg/3/edit

我可以从链接中复制链接地址，然后只需使用窗口。打开：

window.open('data:text/csv;charset=utf-8,1%2C2%2C3');

但通过这种方式，我无法设置文件名（链接通过download="my_file.csv"属性进行设置）。如果有设置文件名的方法，这个解决方案是可以的。

备注：在我的情况下，Chrome和Firefox应该得到支持。我不在乎其他浏览器。

来自jquery文档：

点击事件仅在以下一系列事件之后触发：

当指针位于元素内部时，将按下鼠标按钮。当指针位于元素内部时，将释放鼠标按钮。

您可以通过调用JavaScript本地事件

$('#lnk').get(0).click();

或者更安全：

var lnk = document.getElementById('lnk');
if (lnk) {
    lnk.click();
}

编辑：

出于好奇，我查看了jQuery的来源。事实证明，它们阻止了浏览器在链接上的本地点击事件，特别是故意的，请参阅最新jQuery版本（2.1.x）中events.js的以下摘录，尤其是注释：

click: {
    [...]
    // For cross-browser consistency, don't fire native .click() on links
    _default: function( event ) {
        return jQuery.nodeName( event.target, "a" );
    }
},

尝试使用$('#lnk')[0].click()

JS:

$('#btn1').on('click', function(){
  $('#lnk')[0].click();
});
相关文章：