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.
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>
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
Browser other questions tagged html5 download
You are not signed in. Login or sign up in order to post.
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.
– Woss
Already, this "download" tag only works on Edge :(
– Flavio
The download attribute works on other browsers, I believe that all, at least the main ones, Chrome, firefox, operates, ...
– Costamilam