HTML download the file by link

Download file by link does not work. When clicked, it goes to the next tab of the browser and opens the file. Chrome 65 version

<a download href="images/download.png">download</a>

5 answers

  • answered 2018-04-17 05:18 Lakindu Gunasekara

    Try changing the path, if the path is not accurate it will open a new tab

    <a href="/images/download.png" download> Download </a>

    Further reference https://www.w3schools.com/tags/att_a_download.asp

  • answered 2018-04-17 05:18 לבני מלכה

    Use application/octet-stream

    <a href="/images/download.png" download type="application/octet-stream "> Download </a>
    

    It's simply do it!!!
    for more format:https://www.stubbornjava.com/posts/what-is-a-content-type

  • answered 2018-04-17 05:18 Nitesh Choudhary

    $('a').click(function(e) {
        e.preventDefault();  //stop the browser from following
        window.location.href = 'uploads/file.doc';
    });
    
    <a href="withoutscript.html">Download now!</a>
    

    try this one with jquery or without jquery code both are working

  • answered 2018-04-17 05:18 PHP Geek

    Try this one also, will help you

    $('.download-file').on('click', function(e) {
        
        // For IE
        if(window.navigator.msSaveOrOpenBlob) {
            var blobObject = new Blob(['<p>Hello world!</p>'], {type : 'text/html'});
            window.navigator.msSaveOrOpenBlob(blobObject, 'somefile.html');
            
            e.preventDefault();
        }
        // For browsers that support the `download` attribute
        else {
            // You could also create the url with `window.URL.createObjectURL`
            // var blobObject = new Blob(['<p>Hello world!</p>'], {type : 'text/html'});
            // this.href = window.URL.createObjectURL(blobObject)
            this.href = 'data:text/html;charset=utf-8,'
                + encodeURIComponent('<p>Hello world!</p>');
        }
        
        
        /* * /
        // Doesn't work, idk. It was an attempt for an IE solution
        // Suggested here: http://stackoverflow.com/a/25179390/796832
        // and here: http://stackoverflow.com/a/25179390/796832
        var bufferIframe = document.createElement('iframe');
        bufferIframe.setAttribute('sandbox', 'allow-same-origin');
        bufferIframe.setAttribute('srcdoc', '<p>Hello world!</p>');
        
        document.body.appendChild(bufferIframe);
        
        bufferIframe.contentWindow.document.open('text/plain', 'replace');
        // Keep jsFiddle from complaining about the `write` using 
        bufferIframe.contentWindow.document['write']('<p>write Hello world!</p>');
        bufferIframe.contentWindow.document.close();
        
        //console.dir(bufferIframe.contentDocument);
        bufferIframe.contentWindow.document.execCommand('SaveAs', true, 'request.bin');
        /* */
        
    });
    <p>Download a file demo</p>
    
    
    <a href="http://i.stack.imgur.com/kaxff.png" download="savename.png">Download `download` attribute</a>
    <br>
    <a href="#0" class="download-file" download="some-file.html">Download via JS</a>
    <br>
    
    <hr>
    
    Note:
    <ul>
        <li>You could always just add the `Content-Disposition: attachment; filename="somefile.html"`</li>
        <li>You can even add the header in .htaccess: `Header set Content-Disposition "attachment"`</li>
    </ul>

    For reference https://jsfiddle.net/MadLittleMods/dywbo5vx/

  • answered 2018-04-17 05:18 user9595480

    Download link is not working if link path is not proper so that please check image path is proper or not? Then after check download link is working or not?