How to trigger a file download when clicking an HTML button or JavaScript
This is crazy but I don't know how to do this, and because of how common the words are, it's hard to find what I need on search engines. I'm thinking this should be an easy one to answer.
I want a simple file download, that would do the same as this:
<a href="file.doc">Download!</a>
But I want to use an HTML button, e.g. either of these:
<input type="button" value="Download!">
<button>Download!</button>
Likewise, is it possible to trigger a simple download via JavaScript?
$("#fileRequest").click(function(){ /* code to download? */ });
I'm definitely not looking for a way to create an anchor that looks like a button, use any back-end scripts, or mess with server headers or mime types.
You can trigger a download with the HTML5 download
attribute.
<a href="path_to_file" download="proposed_file_name">Download</a>
Where:
-
path_to_file
is a path that resolves to an URL on the same origin. That means the page and the file must share the same domain, subdomain, protocol (HTTP vs. HTTPS), and port (if specified). Exceptions areblob:
anddata:
(which always work), andfile:
(which never works). -
proposed_file_name
is the filename to save to. If it is blank, the browser defaults to the file's name.
Documentation: MDN, HTML Standard on downloading, HTML Standard on download
, CanIUse
For the button you can do
<form method="get" action="file.doc">
<button type="submit">Download!</button>
</form>