HTML <a> download 属性

在 Web 前端开发中，HTML 的 <a> 标签被广泛用于创建超链接，让用户可以点击链接跳转到其他页面或下载文件。除了常见的 href 属性用于指定链接目标外，<a> 标签还有一个非常有用的属性，即 download 属性。这个属性可以让用户在点击链接时直接下载文件，而不是在浏览器中打开它。

使用方法

要使用 download 属性，只需要在 <a> 标签中添加该属性，并将属性值设置为要下载的文件的名称即可。例如：

<a href="https://www.example.com/file.pdf" download="example.pdf">Download PDF</a>

在这个例子中，用户点击 "Download PDF" 链接时，会直接下载名为 example.pdf 的 PDF 文件，而不是在浏览器中打开它。

注意事项

• 如果 download 属性的值为空或缺失，浏览器会使用链接的 href 属性值作为下载文件的名称。例如：

<a href="https://www.example.com/file.pdf" download>Download PDF</a>

在这个例子中，用户点击链接将下载名为 file.pdf 的 PDF 文件。

• 如果要下载的文件是通过 JavaScript 动态生成的，可以使用 Blob 对象和 URL.createObjectURL() 方法来创建一个临时链接，并将其赋给 href 属性，然后再添加 download 属性。示例代码如下：

// www.javascriptcn.com code example
<button id="downloadBtn">Download Text File</button>

<script>
document.getElementById('downloadBtn').addEventListener('click', function() {
  var text = 'Hello, world!';
  var blob = new Blob([text], { type: 'text/plain' });
  var url = URL.createObjectURL(blob);
  
  var a = document.createElement('a');
  a.href = url;
  a.download = 'hello.txt';
  document.body.appendChild(a);
  
  a.click();
  
  URL.revokeObjectURL(url);
});
</script>

在这个例子中，当用户点击按钮时，会下载一个名为 hello.txt 的文本文件，文件内容为 Hello, world!。

兼容性

download 属性在大多数现代浏览器中都得到了很好的支持，包括 Chrome、Firefox、Safari 和 Edge。但是在一些旧版本的浏览器中可能不被支持，因此在使用时需要注意兼容性。

总的来说，HTML <a> 标签的 download 属性为我们提供了一种简单而方便的方式来让用户下载文件，而不必打开它们。希望本文对你有所帮助！