How to create a download link in HTML

Regarding to this topic, I have 5 ways to add a file download link/button in HTML. See below:

1. <a>

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

2. <form>

<form method="get" action="path_to_file”>

    <button type="submit">Download</button>

</form>

3. window.location.href

<button>Download</button>

$('button').click(function() {

    // Server needs to set Content-Disposition: attachment!

    window.location.href = ‘path_to_file’;

});

4. <iframe>

var downloadFrame = $('#downloadFrame’);

var url = ‘path_to_file’;

if(downloadFrame.length) {

    downloadFrame.attr('src', url);

} else {

    $('body').append('<iframe src="' + url + '" style="display: none;" id="downloadFrame"></iframe>’);

}

5. <a> download Attribute
* Browser support: http://caniuse.com/#feat=download

<a href="path_to_file" download>

Let me know if you have another way to do it.

Menu