Use <a download href=""> tag by passing https address to href

Asked

Viewed 1,177 times

1

I am trying to download a file, passing an https address, follow example:

    <!DOCTYPE html>
    <html>
         <body>
              <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" download> download</a>
        </body>
   </html>

but instead of downloading the file, it is opening.

  • Have you tried it with any kind of file other than image? I believe that in this case there is some browser configuration to open the image instead of downloading it.

  • Already, this "download" tag only works on Edge :(

  • The download attribute works on other browsers, I believe that all, at least the main ones, Chrome, firefox, operates, ...

1 answer

1


I published, in full, your code on my server and really instead of downloading the file, is opening.

<!DOCTYPE html>
<html>
     <body>
          <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" download> download</a>
    </body>
<!DOCTYPE html>
<html>
     <body>
          <a href="1200px-HTML5_logo_and_wordmark.png" download> download</a>
    </body>

CONCLUSION

For logical and even security reasons, the download is decided by the website developer. I can download any file as long as it is published on my domain. Otherwise anyone could download any file from the network.


With Jquery (para imagens) it is possible to open the download window directly

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script language="javascript">

    var image = new Image();
    image.crossOrigin = "anonymous";
    image.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png";
    // get file name - you might need to modify this if your image url doesn't contain a file extension otherwise you can set the file name manually
    var fileName = image.src.split(/(\\|\/)/g).pop();
    image.onload = function () {
        var canvas = document.createElement('canvas');
        canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
        canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
        canvas.getContext('2d').drawImage(this, 0, 0);
        var blob;
        // ... get as Data URI
        if (image.src.indexOf(".jpg") > -1) {
        blob = canvas.toDataURL("image/jpeg");
        } else if (image.src.indexOf(".png") > -1) {
        blob = canvas.toDataURL("image/png");
        } else if (image.src.indexOf(".gif") > -1) {
        blob = canvas.toDataURL("image/gif");
        } else {
        blob = canvas.toDataURL("image/png");
        }
        $("body").html("<br><a download='" + fileName + "' href='" + blob + "'>download</a>");
    };

</script>

Bibliography canvas

  • I’m sorry, but I don’t think I understood your last comment. First you say it would be childish open the image, but ends by saying that opening would have the option of download ( which means there’s no reason to force the download early).

  • Instead of down give a better solution!!

  • I do not know if it is necessary to justify, but the negative vote is not mine. I only questioned because I really did not understand what I had said.

  • @Andersoncarloswoss, blz, I didn’t think it was you. I edited the answer and I think you’ll understand the question and the answer better

  • Solved the problem, thank you very much :)

  • I tried to download a file. pdf, however I am not able, follow the link of the test file:http://www.protec.org.br/uploads/agendas/arquivos/DOCUMENTO%20TESTE%20PDF.pdf

  • @Leocaracciolo, but in case I don’t save to my server and do it via Jquery, it would be possible?

  • @Flavio, it took me a while to complete the answer, I think you’ll understand!

  • @Leocaracciolo now understood, thank you very much :D

Show 4 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.