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

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

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

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

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

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

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

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


当前回答

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

<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在一个新的浏览器选项卡中打开文本文件。但是,Button 1会下载它自己无法打开的文件类型(例如.apk文件)。 按钮2下载文本文件。但是,如果路径是相对的,按钮2只下载文件。当我将路径更改为绝对路径时,浏览器会在一个新选项卡中打开它。

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

其他回答

这并不是对最初问题的答案,但它可能会帮助那些面临与我类似情况的人。

如果您想下载的文件不在同一个源文件上,但您希望能够下载它,您可以使用Content-Disposition头文件来完成。确保服务器在响应文件请求时包含头文件。

设置如下值 内容处理:附件将确保文件将被下载,而不是在浏览器中查看。

一个简单的< A href="http://www.notMyOrigin.com/file.txt">Download</ A >指向你的文件应该在这种情况下下载它。

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

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

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

是什么:

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

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

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

你所需要做的就是在你输入的文件名后面加上下载:

之前:

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

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

确保下载用大写字母书写,否则它将无法工作。