href下载文件根据id取url并下载

首先我们需要了解href属性的作用，它是用于指定超链接目标的URL地址或下载链接的地址。而使用id属性可以唯一标识一个元素，我们可以通过id属性获取到具体的某个元素。因此，本文主要讲解如何根据id属性获取到下载文件的URL地址，并实现文件的下载。

获取下载链接

1.通过JavaScript的getElementById()方法获取链接

我们可以通过JavaScript的getElementById()方法获取到anchor标签中的href属性，进而获取到下载文件的链接。以下是一个示例：

<a id="download-link" href="http://example.com/download/file.zip">Download File</a>

const downloadLink = document.getElementById("download-link");
const fileUrl = downloadLink.href;
console.log(fileUrl); // 输出：http://example.com/download/file.zip

2.通过jQuery的attr()方法获取链接

如果使用jQuery，获取href链接也是很容易的。我们可以使用attr()方法来获取anchor标签中的href属性。以下是一个示例：

<a id="download-link" href="http://example.com/download/file.zip">Download File</a>

const fileUrl = $("#download-link").attr("href");
console.log(fileUrl); // 输出：http://example.com/download/file.zip

下载文件

1.通过a标签的download属性下载文件

HTML5提供了download属性，它可以使anchor标签成为一个下载链接。通过该属性，我们可以实现在点击链接时下载文件的功能。以下是一个示例：

<a id="download-link" href="http://example.com/download/file.zip" download>Download File</a>

在上述代码中，我们给anchor标签添加了download属性，并将该属性的值设为true。这样，当我们点击链接时浏览器会自动下载文件，并将文件保存到默认的下载目录（或者根据用户设置的选项来选择下载路径和保存方式）。

2.通过JavaScript下载文件

如果需要通过JavaScript实现文件下载，我们可以通过创建a标签，设定其href属性和download属性，然后模拟用户的点击行为来实现。以下是一个示例：

function downloadFile(url) {
  const link = document.createElement("a");
  link.href = url;
  link.setAttribute("download", "");
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

downloadFile("http://example.com/download/file.zip");

在上述代码中，我们通过createElement()方法创建了一个a标签，然后给它设置了href和download属性，并将其添加到文档中。接着，我们通过模拟点击行为来触发文件下载。最后，我们从文档中移除了该a标签。

总结

以上是根据id属性获取下载链接并下载文件的两种方法，其中使用download属性的方法只适用于一些较为简单的场景，而使用JavaScript模拟点击的方法更加通用，可以应用于更广泛的场合。