单击 HTML 按钮或 JavaScript 时如何触发文件下载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11620698/
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
How to trigger a file download when clicking an HTML button or JavaScript
提问by brentonstrine
This is crazy but I don't know how to do this, and because of how common the words are, it's hard to find what I need on search engines. I'm thinking this should be an easy one to answer.
这很疯狂，但我不知道该怎么做，而且由于这些词很常见，很难在搜索引擎上找到我需要的东西。我想这应该是一个容易回答的问题。
I want a simple file download, that would do the same as this:
我想要一个简单的文件下载，它的作用与此相同：
<a href="file.doc">Download!</a>
But I want to use an HTML button, e.g. either of these:
但我想使用 HTML 按钮，例如以下任一按钮：
<input type="button" value="Download!">
<button>Download!</button>
Likewise, is it possible to trigger a simple download via JavaScript?
同样，是否可以通过 JavaScript 触发简单的下载？
$("#fileRequest").click(function(){ /* code to download? */ });
I'm definitely notlooking for a way to create an anchor that looks like a button, use any back-end scripts, or mess with server headers or mime types.
我绝对不是在寻找一种方法来创建一个看起来像按钮的锚点，使用任何后端脚本，或者弄乱服务器标头或 mime 类型。
采纳答案by Cfreak
For the button you can do
对于按钮，你可以做
<form method="get" action="file.doc">
<button type="submit">Download!</button>
</form>
回答by Joe Pigott
You can trigger a download with the HTML5 downloadattribute.
您可以使用 HTML5download属性触发下载。
<a href="path_to_file" download="proposed_file_name">Download</a>
Where:
在哪里：
path_to_fileis a path that resolves to an URL on the same origin.That means the page and the file must share the same domain, subdomain, protocol (HTTP vs. HTTPS), and port (if specified). Exceptions areblob:anddata:(which always work), andfile:(which never works).proposed_file_nameis the filename to save to. If it is blank, the browser defaults to the file's name.
path_to_file是路径解析为URL的同根同源。这意味着页面和文件必须共享相同的域、子域、协议（HTTP 与 HTTPS）和端口（如果指定）。例外是blob:和data:（总是有效），和file:（从不有效）。proposed_file_name是要保存到的文件名。如果为空，则浏览器默认为文件名。
Documentation: MDN, HTML Standard on downloading, HTML Standard on download, CanIUse
回答by sleepyup
HTML:
HTML：
<button type="submit" onclick="window.open('file.doc')">Download!</button>
回答by Matt Ball
With jQuery:
使用 jQuery：
$("#fileRequest").click(function() {
// // hope the server sets Content-Disposition: attachment!
window.location = 'file.doc';
});
回答by Stefanos Chrs
Old thread but it's missing a simple js solution:
旧线程，但缺少一个简单的 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)
回答by Danubian Sailor
You can do it with "trick" with invisible iframe. When you set "src" to it, browser reacts as if you would click a link with the same "href". As opposite to solution with form, it enables you to embed additional logic, for example activating download after timeout, when some conditions are met etc.
你可以用隐形 iframe 的“技巧”来做到这一点。当您将“src”设置为它时，浏览器的反应就像您单击具有相同“href”的链接一样。与表单解决方案相反，它使您能够嵌入额外的逻辑，例如在超时后激活下载，满足某些条件等。
It is also very silient, there's no blinking new window/tab like when using window.open.
它也非常安静，没有像使用window.open.
HTML:
HTML：
<iframe id="invisible" style="display:none;"></iframe>
Javascript:
Javascript：
function download() {
var iframe = document.getElementById('invisible');
iframe.src = "file.doc";
}
回答by CFP Support
Bootstrap Version
引导版本
<a class="btn btn-danger" role="button" href="path_to_file"
download="proposed_file_name">
Download
</a>
Documented in Bootstrap 4 docs, and works in Bootstrap 3 as well.
记录在 Bootstrap 4 文档中，也适用于 Bootstrap 3。
回答by Delconis
I think this is the solution you were looking for
我认为这是您正在寻找的解决方案
<button type="submit" onclick="window.location.href='file.doc'">Download!</button>
I hade a case where my Javascript generated a CSV file. Since there is no remote URL to download it I use the following implementation.
我有一个案例，我的 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);
}
回答by olli
What about:
关于什么：
<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">
回答by Starwarswii
You can hide the download link and make the button click it.
您可以隐藏下载链接并使按钮单击它。
<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>
