点击HTMLbutton或JavaScript时如何触发文件下载
这是疯狂的，但我不知道如何做到这一点，由于这些词有多普遍，很难find我需要的search引擎。 我想这应该是一个容易回答的问题。
我想要一个简单的文件下载，这将做同样的事情：
<a href="file.doc">Download!</a> 但是我想要使用HTMLbutton，例如：
<input type="button" value="Download!"> <button>Download!</button>
同样，是否可以通过JavaScript触发一个简单的下载？
$("#fileRequest").click(function(){ /* code to download? */ });
我绝对没有find一种方式来创build一个看起来像一个button，使用任何后端脚本，或混乱的服务器头或MIMEtypes的锚点。
对于button，你可以做
<form method="get" action="file.doc"> <button type="submit">Download!</button> </form>
我做了一些研究，find了最好的答案。 您可以使用新的HTML5 download属性触发download 。
<a href="path_to_file" download="proposed_file_name">Download</a>
其中：
-
path_to_file是绝对path或相对path， - recommended_file_name保存到的文件名（可以是空白，然后默认为实际的文件名）。
希望这是有帮助的。
Whatwg 文档
我可以用吗
使用jQuery：
$("#fileRequest").click(function() { // // hope the server sets Content-Disposition: attachment! window.location = 'file.doc'; });
HTML：
<button type="submit" onclick="window.open('file.doc')">Download!</button>
你可以使用隐藏的iframe“窍门”来做到这一点。 当你设置“src”的时候，浏览器就会反应，就像你点击一个带有相同“href”的链接一样。 与表单解决scheme相反，它允许您embedded额外的逻辑，例如在满足某些条件时激活超时后的下载等。
这也是非常柔和的，有没有像使用window.open时闪烁的新窗口/选项卡。
HTML：
<iframe id="invisible" style="display:none;"></iframe>
使用Javascript：
function download() { var iframe = document.getElementById('invisible'); iframe.src = "file.doc"; }
关于什么：
<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">
在<body>和</body>标签之间的任意位置，使用下面的代码放置一个button：
<button> <a href="file.doc" download>Click to Download!</a> </button>
这是肯定的工作！
你可以隐藏下载链接，并点击button。
<button onclick="document.getElementById('link').click()">Download!</button> <a id="link" href="file.doc" download hidden></a>
这是最后为我工作，因为下载的文件是在页面加载时确定的。
JS来更新表单的action属性：
function setFormAction() { document.getElementById("myDownloadButtonForm").action = //some code to get the filename; }
调用JS来更新表单的action属性：
<body onLoad="setFormAction();">
使用提交button表单标签：
<form method="get" id="myDownloadButtonForm" action=""> Click to open document: <button type="submit">Open Document</button> </form>
以下不起作用：
<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">
<a href="complexDownload" download="file.doc" onclick="this.href='file.doc';"> <button>Download <i>File.doc</i> Now!</button> </a>
它似乎没有在Safari中工作，但它在Chrome中工作。 此外，一旦用户点击链接，更改链接的href属性似乎使其在旧版本的IE，但不是在最新版本的IE或边缘。
我认为这是你正在寻找的解决scheme
<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); }
如果你有一个复杂的URL，如file.doc?foo=bar&jon=doe另一种方法是在表单中添加隐藏字段
<form method="get" action="file.doc"> <input ty='hidden' name='foo' value='bar'/> <input ty='hidden' name='john' value='doe'/> <button type="submit">Download Now</button> </form>
启发@Cfreak答案是不完整的
如果你不能使用表单，使用downloadjs的另一种方法很好。 Downloadjs使用blob和html 5文件API：
{downloadjs（url，filename）}）/>
*它是jsx / react的语法，但可以在纯html中使用
对于我来说，adingbutton代替锚文本效果非常好。
<a href="file.doc"><button>Download!</button></a>
大多数规则可能都不行，但看起来不错。
如果你使用<a>标签，不要忘记使用通往该文件的整个url – 即：
<a href="http://www.example.com/folder1/file.doc">Download</a>
使用正常的链接，并使用CSS来使其看起来像一个button。
