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

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

<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="file.doc"><button>Download!</button></a>

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

其他回答

如果你有一个复杂的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的不完整的答案

你可以用隐形iframe的“trick”来实现。当你将“src”设置为它时,浏览器的反应就像你点击了一个具有相同“href”的链接。与表单解决方案相反,它允许您嵌入额外的逻辑,例如在超时后激活下载,当某些条件满足时等等。

它也非常安静,没有闪烁的新窗口/标签时使用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';">

The solution I have come up with is that you can use download attribute in anchor tag but it will only work if your html file is on the server. but you may have a question like while designing a simple html page how can we check that for that you can use VS code live server or bracket live server and you will see your download attribute will work but if you will try to open it simply by just double clicking html page it open the file instead of downloading it. conclusion: attribute download in anchor tag only works if your html file is no server.

如果你愿意

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

对于下载文件的能力,否则将由浏览器渲染,但仍然想要一个整洁的javascript函数在按钮中使用;你可以在HTML中有一个看不见的链接,然后在javascript中点击它。

函数download_file() { . getelementbyid(“my_download”).click () } <a id="my_download" href="path_to_file" download="file_name" style="display:none;" > < / > <按钮onClick = " download_file() " >下载! !< / >按钮