Download image (or file) by clicking <a> or <button. http://stackoverflow.com/questions/18807860/download-image-on-button-click http://stackoverflow.com/questions/11620698/how-to-trigger-a-file-download-when-clicking-an-html-button-or-javascript

Using download attribute for <a>

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

Pros: fast, don't need program from server (the link doesn't need have Content-Disposition: attachment is set from server)

Cons: Partial support by browsers. check http://caniuse.com/#feat=download.

<button>

<form method="get" action="file.doc">
<button type="submit">Download!</button>
</form>

Pros: fast, don't need program from server, apply for <button>, no need js

Cons: the link must have Content-Disposition: attachment is set from server

Using window.open(url) by javascript

<button onclick="window.open('file.doc')">Download!</button>

Pros: fast, don't need program from server, apply for <button>, need js

Cons: browser will block it because it show popup, user need to permit showing popup window. Even user permit it, it will open new window to show file, not download file. the link must have Content-Disposition: attachment is set from server

Using javascript

$("#fileRequest").click(function() {
    window.location = 'file.doc';
});

Pros: fast, don't need program from server, apply for <button> and <a>, need js

Cons: the link must have Content-Disposition: attachment is set from server

Set Content-Disposition: attachment for link from server, and just using one of above ways from client. I like to use <a href="file.doc">Download</a>

ref:

khoand0000/download-file-by-js.md