单击HTML按钮或JavaScript时如何触发文件下载

Question

这很疯狂,但我不知道如何做到这一点,而且由于这些词有多常见,很难在搜索引擎上找到我需要的东西.我认为这应该是一个容易回答的问题.

我想要一个简单的文件下载,它会像这样做:

<a href="file.doc">Download!</a>

但我想使用HTML按钮,例如以下任何一种:

<input type="button" value="Download!">
<button>Download!</button>

同样,是否可以通过JavaScript触发简单下载？

$("#fileRequest").click(function(){ /* code to download? */ });

我绝对不是在寻找一种方法来创建一个看起来像按钮的锚,使用任何后端脚本,或者混淆服务器头或mime类型.

Answer 1

我做了一些研究,找到了最好的答案.您可以使用新的HTML5 download属性触发下载.

<a href="path_to_file" download="proposed_file_name">Download</a>

地点:

• path_to_file 是绝对路径还是相对路径,
• blob: 要保存的文件名(可以为空,则默认为实际文件名).

希望这是有帮助的.

Whatwg 文档

我可以用吗

Answer 2

对于你可以做的按钮

<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>

Answer 3

HTML:

<button type="submit" onclick="window.open('file.doc')">Download!</button>

Answer 4

使用jQuery:

$("#fileRequest").click(function() {
    // // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});

Answer 5

旧线程,但它缺少一个简单的js解决方案:

let a = document.createElement('a')
a.href = item.url
a.download = item.url.split('/').pop()
document.body.appendChild(a)
a.click()
document.body.removeChild(a)

Answer 6

你可以使用隐形iframe的"技巧"来做到这一点.当您为其设置"src"时,浏览器会做出反应,就像您单击具有相同"href"的链接一样.与表单解决方案相反,它使您能够嵌入其他逻辑,例如在超时后激活下载,满足某些条件等.

它也很简单,没有像使用时那样闪烁的新窗口/标签window.open.

HTML:

<iframe id="invisible" style="display:none;"></iframe>

使用Javascript:

function download() {
    var iframe = document.getElementById('invisible');
    iframe.src = "file.doc";
}

Answer 7

引导版本

<a class="btn btn-danger" role="button" href="path_to_file"
   download="proposed_file_name">
  Download
</a>

记录在引导4个文档,并在引导3工作为好.

Answer 8

我认为这是您正在寻找的解决方案

<button type="submit" onclick="window.location.href='file.doc'">Download!</button>

我讨厌我的Javascript生成CSV文件的情况.由于没有可下载的远程URL,我使用以下实现.

downloadCSV: function(data){
    var MIME_TYPE = "text/csv";

    var blob = new Blob([data], {type: MIME_TYPE});
    window.location.href = window.URL.createObjectURL(blob);
}

Answer 9

关于什么:

<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">

Answer 10

您可以隐藏下载链接并使按钮单击它.

<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>

Answer 11

在我的测试中，只要您使用相对链接，以下内容就适用于所有文件类型和浏览器：

<a href="/assets/hello.txt" download="my_file.txt"><button>Download 2</button></a>

• /assets/hello.txt只是我网站上的相对路径。将其更改为您自己的相对路径。
• my_file.txt是您希望文件下载时调用的名称。

解释

我注意到很多答案下都有评论说浏览器只会尝试打开文件本身，而不是根据文件类型下载它。我发现这是真的。

我制作了两个按钮来使用两种不同的方法进行测试：

<button onclick="window.location.href='/assets/hello.txt';">Download 1</button>

<a href="/assets/hello.txt" download="my_file.txt"><button>Download 2</button></a>

注意事项：

• 按钮 1 在新的浏览器选项卡中打开文本文件。但是，按钮 1将下载其自身无法打开的文件类型的文件（例如 .apk 文件）。
• 按钮 2 下载了文本文件。但是，按钮 2 仅在相对路径时下载文件。当我将路径更改为绝对路径时，浏览器会在新选项卡中打开它。

我在 Firefox、Safari 和 Chrome 上对此进行了测试。