点击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。