Question

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>

Answer 1

document.querySelectorAll('a')可以获取文档中的所有<a>元素。

它返回一个数组，因此您可以使用forEach()遍历所有元素。

最后，您可以使用setAttribute()设置元素的属性。

您可能会看到<a download="">，但与<a download>相同。

请参见下面的示例。

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>

Answer 2

“ download”属性没有太多内容。您只需提供一个文件名作为属性值。然后，当用户单击anchor link,时，他们将下载HREF位置并使用提供的文件名保存结果有效负载：

<a href="./generate-zip?id=4" download="assets.zip">Download</a>

在这种情况下，服务器生成的ZIP file将另存为"assets.zip".到用户的计算机

有关更多详细信息，您可以访问

https://www.bennadel.com/blog/3412-using-the-anchor-tag-href-and-download-attributes-to-force-a-file-download.htm

希望能帮助您解决问题

Answer 3

Could not load file or assembly 'Microsoft.Owin, Version=2.0.2.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040) 
   at Microsoft.Owin.Hosting.Builder.AppBuilderFactory.Create()
   at Microsoft.Owin.Hosting.Engine.HostingEngine.InitializeBuilder(StartContext context)
   at Microsoft.Owin.Hosting.Engine.HostingEngine.Start(StartContext context)
   at Microsoft.Owin.Hosting.Starter.HostingStarter.Start(StartOptions options)
   at WorkflowService.WorkflowService.OnStart(String[] args)

var linkTags = document.getElementsByTagName('a');
for(var i= 0; i< linkTags.length; i++)
  linkTags[i].setAttribute('download','');

Answer 4

您应该使用download属性。

您的标签将如下所示

<a href="link of some pdf file" download = "link_of_some_pdf_file.pdf">View1</a>

您应该这样做

element = document.getElementById(...);
element.setAttribute('download', element.getAttribute('href');

我会让您弄清楚如何将其循环放置；）

Answer 5

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>

第一件事是从dom中获取所有元素，

遍历每个元素并使用setAttribute函数添加属性

Answer 6

您需要获取所有元素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>

我们如何为所有<a> tags present inside tag (using JavaScript)?

6 个答案: