Download File Using JavaScript/Jquery

Download File Using jQuery

I might suggest this, as a more gracefully degrading solution, using preventDefault:

$('a').click(function(e) {
    e.preventDefault();  //stop the browser from following
    window.location.href = 'uploads/file.doc';
});

<a href="no-script.html">Download now!</a>

Even if there's no Javascript, at least this way the user will get some feedback.

Download File Using JavaScript/jQuery

Use an invisible <iframe>:

<iframe id="my_iframe" style="display:none;"></iframe>
<script>
function Download(url) {
    document.getElementById('my_iframe').src = url;
};
</script>

To force the browser to download a file it would otherwise be capable of rendering (such as HTML or text files), you need the server to set the file's MIME Type to a nonsensical value, such as application/x-please-download-me or alternatively application/octet-stream, which is used for arbitrary binary data.

If you only want to open it in a new tab, the only way to do this is for the user to a click on a link with its target attribute set to _blank.

In jQuery:

$('a#someID').attr({target: '_blank', 
                    href  : 'http://localhost/directory/file.pdf'});

Whenever that link is clicked, it will download the file in a new tab/window.

Download a file by jQuery.Ajax

2019 modern browsers update

This is the approach I'd now recommend with a few caveats:

• A relatively modern browser is required
• If the file is expected to be very large you should likely do something similar to the original approach (iframe and cookie) because some of the below operations could likely consume system memory at least as large as the file being downloaded and/or other interesting CPU side effects.

fetch('https://jsonplaceholder.typicode.com/todos/1')

  .then(resp => resp.blob())

  .then(blob => {

    const url = window.URL.createObjectURL(blob);

    const a = document.createElement('a');

    a.style.display = 'none';

    a.href = url;

    // the filename you want

    a.download = 'todo-1.json';

    document.body.appendChild(a);

    a.click();

    window.URL.revokeObjectURL(url);

    alert('your file has downloaded!'); // or you know, something with better UX...

  })

  .catch(() => alert('oh no!'));

Download file on button click jquery

using <a> does the job without involving javascript

<a href="./file-path/file-name" class="btn btn-success" download>Download</a>

The download attribute will force download the viewable content. Otherwise, It will be rendered instead of downloading.

Start downloading file using JQuery

Alternatively you can also set the top.location

$('#download_button').click(function(){
    var filepath = $(this).attr('data-filepath');
    top.location.href = filepath;
});

How to download file using jquery?

You can trigger a download by using the new HTML5 download attribute.

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

path_to_file is either an absolute or relative path,
proposed_file_name the filename to save to (can be blank, then defaults to the actual filename).

---

Related Topics