CODEWITHSUNDEEP
javascripthtmlfirefox
Santhosh
Santhosh

Reputation: 11774

Html: how to download the link on-click, rather than right click and save as

In my html file i want to have an image link when clicked it start downloading the image to the local folder. Generally to download a link, we have to right click and then select save as.

I tried the following:

 var href = document.createElement("a");
 href.setAttribute("href", url1);
 href.appendChild(document.createTextNode("Image Download"));
 href.setAttribute("download", "test.jpg");
 contentDiv.appendChild(href);

But its still not working. i click, the image is opened in the browser

Upvotes: 3

Views: 3413

Answers (3)

Marat Tanalin
Marat Tanalin

Reputation: 14123

Send the following response headers from server to download a file that otherwise would be displayed in browser itself:

Content-Disposition: attachment; filename=FILENAME
Content-Type: application/x-force-download; name="FILENAME"

where the FILENAME is desired name for the file to have when downloaded.

Upvotes: 0

Brett Carwile
Brett Carwile

Reputation: 23

Instead try something along the lines of this in your HTML:

<a download="test.jpg" href="insert/path" title="insertName">
insert text here!!
</a>

Hopefully this helps, however I've heard this only works in certain browsers!

*Note - I believe you need to do it just like I have it, just replace the place holders!!

Upvotes: 1

Danny Fardy Jhonston Berm&#250;dez
Danny Fardy Jhonston Berm&#250;dez

Reputation: 5571

In the MDN Reference:

This attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource so that when the user clicks on the link they will be prompted to save it as a local file. If the attribute has a value, the value will be used as the pre-filled file name in the Save prompt that opens when the user clicks on the link (the user can change the name before actually saving the file of course). There are no restrictions on allowed values (though / and \ will be converted to underscores, preventing specific path hints), but you should consider that most file systems have limitations with regard to what punctuation is supported in file names, and browsers are likely to adjust file names accordingly.

The download attribute is not supported in Firefox.

However, if you're using Chrome, with JavaScript, you could try with something like this:

var imageURL, contentDiv, href, img;
imageURL = "https://cdn3.iconfinder.com/data/icons/tango-icon-library/48/go-home-128.png";

contentDiv = document.getElementById("contentDiv");

href = document.createElement("a");
href.setAttribute("href", imageURL);
href.setAttribute("download", imageURL);

img = document.createElement("img");
img.alt = "Download image";
img.title = img.alt;
img.src = imageURL;

href.appendChild(img);
contentDiv.appendChild(href);
<div id="contentDiv"></div>

Note: In Google Chrome, you can use the download attribute without setting the url to download.

Example:

<a href="https://cdn3.iconfinder.com/data/icons/tango-icon-library/48/go-home-128.png" download>Image Download</a>

Upvotes: 1

Related Questions