How to trigger a file download when clicking an HTML button or JavaScript

Question

This is insane, but I have no idea how to accomplish it, and because the terms are so prevalent, it's difficult to discover what I need on search engines. 

I believe this should be a simple question to answer.

I'd want a basic file download that does the same thing 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 not searching for a means to make an anchor look like a button, employ any back-end scripting, or tamper with server headers or mime types.

Answer 1

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 are blob: and data: (which always work), and file: (which never works).
proposed_file_name is the filename to save to. If it is blank, the browser defaults to the file's name.