最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

html - How can we add a download attribute to all the <a> tags present inside <body><body&

programmeradmin4浏览0评论

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
Add a ment  | 

6 Answers 6

Reset to default 5

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