我们如何向其中包含的所有<a>标签</a>添加下载属性 <body></body> 标签（使用JavaScript）？
[英]How can we add a download attribute to all the <a> tags present inside <body></body> tag (using JavaScript)?
问题描述
Using JavaScript, I want to add a 'download' attribute in all the <a> tags present on my webpage. 
我想使用JavaScript在网页上显示的所有<a>标记中添加“下载”属性。
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. 我想要的是使用JavaScript一次在所有<a>标记中添加下载属性。
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>
6 个解决方案
解决方案1
1 已采纳 2019-04-05 07:31:40
document.querySelectorAll('a') can get all the <a> element in your document. document.querySelectorAll('a')可以获取文档中的所有<a>元素。
It returns an array so you can use forEach() to iterate through all the elements. 它返回一个数组，因此您可以使用forEach()遍历所有元素。
Finally, you can use setAttribute() to set an element's attribute. 最后，您可以使用setAttribute()设置元素的属性。
You may see <a download=""> but that's the same as <a download> . 您可能会看到<a download="">但与<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>
解决方案2
1 2019-04-05 07:32:17
There's not really too much to this " download " attribute. 这个“ download ”属性实际上并没有太多。 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: 然后，当用户单击anchor link,他们将下载HREF位置并使用提供的文件名保存生成的有效负载：
<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 computer as "assets.zip". 在这种情况下，服务器生成的ZIP file将作为"assets.zip".保存到用户的计算机中"assets.zip".
for further details you can visit 有关更多详细信息，您可以访问
https://www.bennadel.com/blog/3412-using-the-anchor-tag-href-and-download-attributes-to-force-a-file-download.htm https://www.bennadel.com/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 希望能帮助您解决问题
解决方案3
0 2019-04-05 07:23:25
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>
解决方案4
0 2019-04-05 07:24:20
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 ;) 我会让您弄清楚如何将其循环放置；）
解决方案5
0 2019-04-05 07:25:51
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, 首先是从dom中获取所有元素，
the traverse each a element and add attribute with setAttribute function 遍历每个元素并使用setAttribute函数添加属性
解决方案6
0 2019-04-05 07:28:04
You need to get All elements a , then loop through it set attribute of each element. 您需要获取所有元素a ，然后遍历每个元素的set属性。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.