当点击HTML按钮或JavaScript时，如何触发文件下载

这很疯狂，但我不知道怎么做，因为这些词太常见了，在搜索引擎上很难找到我需要的东西。我想这个问题应该很容易回答。

我想要一个简单的文件下载，这将与此相同:

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

但是我想使用一个HTML按钮，例如:

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

同样，是否有可能通过JavaScript触发一个简单的下载?

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

我绝对不会寻找一种方法来创建一个看起来像按钮的锚，使用任何后端脚本，或混乱的服务器头或mime类型。

当前回答

对于按钮可以这样做

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

其他回答

jQuery:

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

对我来说，点击按钮而不是锚文本工作得很好。

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

在大多数规则下，这可能是不合适的，但它看起来相当不错。

如果你使用<a>标记，不要忘记使用指向文件的整个url——即:

<a href="http://www.example.com/folder1/file.doc">Download</a>

如果你不能使用表单，另一种方法downloadjs很适合。Downloadjs在底层使用blob和html 5文件API:

<div onClick=(()=>{downloadjs(url, filename)})/>

*它是jsx/react语法，但可以在纯HTML中使用

对于按钮可以这样做

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

推荐文章