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

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

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

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

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

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

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

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


当前回答

如果你正在寻找一个普通的JavaScript(而不是jQuery)解决方案,并且不使用HTML5属性,你可以试试这个。

const download = document.getElementById("fileRequest"); 下载。addEventListener(“点击”,请求); 函数请求(){ 窗口。Location = 'document.docx'; } .dwnld-cta { 边框半径:15px 15px; 宽度:100 px; 行高:22 px } 下载文件< h1 > < / h1 > <button id="fileRequest" class="dwnld-cta">Download</button> .

其他回答

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

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

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

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

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

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

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

jQuery:

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

您可以使用HTML5 download属性触发下载。

<a href="path_to_file" download="proposed_file_name">Download</a>

地点:

path_to_file是解析为同一源上的URL的路径。这意味着页面和文件必须共享相同的域、子域、协议(HTTP vs. HTTPS)和端口(如果指定了)。例外是blob:和data:(总是工作)和file:(从不工作)。 Proposed_file_name是要保存到的文件名。如果它为空,浏览器默认为文件的名称。

文档:MDN, HTML标准下载,HTML标准下载,CanIUse

如果你有一个复杂的URL,比如file。doc?Foo =bar&jon=doe是在表单中添加隐藏字段

<form method="get" action="file.doc">
  <input type="hidden" name="foo" value="bar" />
  <input type="hidden" name="john" value="doe" />
  <button type="submit">Download Now</button>
</form>

灵感来自@Cfreak的不完整的答案