Using JavaScript, I want to add a 'download' attribute in all the <a>
tags present on my webpage.
Current code is
<a href="link of some pdf file">View1</a>
<a href="link of some pdf file">View2</a>
<a href="link of some pdf file">View3</a>
<a href="link of some pdf file">View4</a>
<a href="link of some pdf file">View5</a>
What I want is to add download attribute in all the <a>
tags at once using JavaScript.
The result should be same as shown below:
<a href="link of some pdf file" download>View1</a>
<a href="link of some pdf file" download>View2</a>
<a href="link of some pdf file" download>View3</a>
<a href="link of some pdf file" download>View4</a>
<a href="link of some pdf file" download>View5</a>
Using JavaScript, I want to add a 'download' attribute in all the <a>
tags present on my webpage.
Current code is
<a href="link of some pdf file">View1</a>
<a href="link of some pdf file">View2</a>
<a href="link of some pdf file">View3</a>
<a href="link of some pdf file">View4</a>
<a href="link of some pdf file">View5</a>
What I want is to add download attribute in all the <a>
tags at once using JavaScript.
The result should be same as shown below:
<a href="link of some pdf file" download>View1</a>
<a href="link of some pdf file" download>View2</a>
<a href="link of some pdf file" download>View3</a>
<a href="link of some pdf file" download>View4</a>
<a href="link of some pdf file" download>View5</a>
Share
Improve this question
edited Apr 9, 2019 at 20:01
Mr Lister
46.6k15 gold badges113 silver badges155 bronze badges
asked Apr 5, 2019 at 7:15
Vaibhav DhasmanaVaibhav Dhasmana
1852 silver badges13 bronze badges
2
- 3 And what have you tried so far? – fedesc Commented Apr 5, 2019 at 7:18
-
[...document.getElementsByTagName('a')].forEach(link => link.setAttribute('download',''))
– Yevhen Horbunkov Commented Apr 5, 2019 at 7:20
6 Answers
Reset to default 5document.querySelectorAll('a')
can get all the <a>
element in your document.
It returns an array so you can use forEach()
to iterate through all the elements.
Finally, you can use setAttribute()
to set an element's attribute.
You may see <a download="">
but that's the same as <a download>
.
See example below.
var updateTextarea = function () {
document.querySelector('textarea').value = document.querySelector('main').innerHTML;
};
var addDownload = function () {
document.querySelectorAll('a').forEach(function(e) { e.setAttribute('download', ''); });
updateTextarea();
};
updateTextarea();
<main>
<a href="link of some pdf file">View1</a>
<a href="link of some pdf file">View2</a>
<a href="link of some pdf file">View3</a>
<a href="link of some pdf file">View4</a>
<a href="link of some pdf file">View5</a>
</main>
<p><button onclick="addDownload()">Add download</button></p>
<p><textarea cols="50" rows="8" readonly></textarea></p>
var linkTags = document.getElementsByTagName('a');
for(var i= 0; i< linkTags.length; i++)
linkTags[i].setAttribute('download','');
<a href="link of some pdf file">View1</a>
<a href="link of some pdf file">View2</a>
<a href="link of some pdf file">View3</a>
<a href="link of some pdf file">View4</a>
<a href="link of some pdf file">View5</a>
You should use the download attribute.
Your tags will look like this
<a href="link of some pdf file" download = "link_of_some_pdf_file.pdf">View1</a>
You should do this
element = document.getElementById(...);
element.setAttribute('download', element.getAttribute('href');
I'll let you figure out how to put it in a cycle ;)
var hrefs = document.getElementsByTagName("a");
for (var i=0, max=hrefs.length; i < max; i++) {
hrefs[i].setAttribute("download","pdf");
}
<a href="link of some pdf file">View1</a>
<a href="link of some pdf file">View2</a>
<a href="link of some pdf file">View3</a>
<a href="link of some pdf file">View4</a>
<a href="link of some pdf file">View5</a>
the first thing is to get all the elements from the dom,
the traverse each a element and add attribute with setAttribute function
You need to get All elements a
, then loop through it set attribute of each element.
var links = document.getElementsByTagName('a');
for(var i= 0; i< links.length; i++)
links[i].setAttribute('download','');
<a href="link of some pdf file">View1</a>
<a href="link of some pdf file">View2</a>
<a href="link of some pdf file">View3</a>
<a href="link of some pdf file">View4</a>
<a href="link of some pdf file">View5</a>
There's not really too much to this "download
" attribute. You simply provide a filename as the attribute value. And then, when the user clicks on the anchor link,
they will download the HREF location and save the resultant payload using the provided filename:
<a href="./generate-zip?id=4" download="assets.zip">Download</a>
In this case, the server-generated ZIP file
will be saved to the user's puter as "assets.zip".
for further details you can visit
https://www.bennadel./blog/3412-using-the-anchor-tag-href-and-download-attributes-to-force-a-file-download.htm
hope that would help you to sort out problem