Search code examples
javascriptjquerydownload

Download File Using JavaScript/jQuery

I have a very similar requirement specified here.

I need to have the user's browser start a download manually when $('a#someID').click();

But I cannot use the window.href method, since it replaces the current page contents with the file you're trying to download.

Instead I want to open the download in new window/tab. How is this possible?

Solution

  • 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.