Use the tag to download href="" passing https address to the href

Question

Use the tag to download href="" passing https address to the href

Navigation

#1 by (1 votes)

2

I'm trying to download a file by passing an https address, following 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.

html5 download

asked by anonymous 05.05.2018 / 14:36

1 answer

html tag within a string displayed one character at a time White screen in transition between activities

score 1 · Accepted Answer

I've fully published your code on my server and actually instead of downloading the file, it's opening. See it working here

<!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>

I clicked with the right mouse button and saved the image on my computer. Soon after I published on my server and created a page in the same way as yours, but changing the path of the image to that of my server. Check this link that the download window will open.

<!DOCTYPE html>
<html>
     <body>
          <a href="1200px-HTML5_logo_and_wordmark.png" download> download</a>
    </body>

CONCLUSION

For logical reasons and even security, who decides to download is the site developer. I can download any file as long as it is published in my domain. See on this link here that I made a PHP file download available. Otherwise anyone could download any file from the network.

With Jquery (para imagens) you can open the download window directly Functional example

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptlanguage="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