javascript - 单击按钮时下载文件 jQuery

Question

我的 HTML 中有以下按钮:

<button id="exportVCardButton">Export vCard</button>

我有以下在单击按钮时执行的 jQuery 代码:

$(document).on('click', '#exportVCardButton', function (e) {
    e.preventDefault();
    document.location.href = 'contacts/createVCard.php?contactID=<?php echo $contactID; ?>';
});

单击此按钮时，createVCard.php 脚本会创建一个 vCard 并将该文件作为下载文件发送到浏览器。在 Safari 中，它工作得很好。但是，在 Google Chrome 中，我在控制台中收到以下错误:

资源解释为文档但使用 MIME 类型 text/x-vcard 传输

我尝试了几种不同的解决方案，但似乎都不起作用。有人对在 Chrome 中像在 Safari 中一样下载文件有什么建议吗？

Answer 1

我知道的解决 chrome 问题的唯一方法是指定 HTML5 download attribute在 <a> 里面标记，要使用它，您的代码将更改为:

<a id="exportVCardButton" href="contacts/createVCard.php?contactID=<?php echo $contactID; ?>" download>Export vCard</a>

或者，对于 JQuery，可能是这样的:(未测试)

$(document).on('click', '#exportVCardButton', function (e) {
    e.preventDefault();
    var href = $('#exportVCardButton').attr('href');
    document.location.href = href;
});

您需要确保在链接中设置了 href 属性，jQuery 才能正常工作