使用JQuery点击“下载”链接无法下载文件

Question

我有一个带有href和download属性的链接：

  <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：

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

但是这种方法无法设置文件名（链接通过download="my_file.csv"属性实现）。如果有一种方法可以设置文件名，那么这个解决方案就很好。注意：在我的情况下，Chrome和Firefox应该支持，我不关心其他浏览器。

- Alexander

---

自动化“用户发起”的点击事件是一个安全问题。浏览器客户端会阻止这种操作。我建议将文件保存到服务器上，将用户重定向到新窗口，然后将文件提供给客户端。 - StaticVoid

@StaticVoid 这根本不是安全问题。这是一个jQuery的“问题”。 - Ian

如果你遇到了同样的问题，欢迎使用无服务器CsvGeneretor：https://github.com/AlexLibs/client-side-csv-generator - Alexander

Answer 1

来自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" );
    }
},

- UweB

---

我尝试了几个代码，这是唯一一个有效的。非常感谢！ - Dimitar

Answer 2

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

JS:

$('#btn1').on('click', function(){
  $('#lnk')[0].click();
});

- karan3112