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>

• javascript
• html

• 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 6

document.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