download属性的作用是什么？链接文件如何强制下载？
在Web开发中，我们经常需要提供文件下载功能。默认情况下，当用户点击一个指向图片、PDF或文本文件的链接时，浏览器会尝试在当前页面或新标签页中直接打开并预览该文件，而不是将其下载到本地。为了改变这一默认行为，HTML5引入了download属性，实现了链接文件的强制下载。
一、download属性的作用
download属性是HTML5中新增的<a>标签属性，它的主要作用有两个：
强制下载：告诉浏览器该URL指向的资源应该作为下载项处理，而不是在浏览器中导航或打开预览。
重命名文件：允许开发者为下载的文件指定一个默认的文件名。如果
download属性有值，该值将作为下载文件的默认名称；如果没有值，则使用服务器上原始的文件名。
基础语法示例
<!-- 强制下载图片，并保持原文件名 --> <a href="https://www.ipipp.com/images/logo.png" download>下载图片</a> <!-- 强制下载PDF，并重命名为“年度报告.pdf” --> <a href="https://www.ipipp.com/docs/report.pdf" download="年度报告.pdf">下载并重命名PDF</a>
二、同源链接文件的强制下载
对于同源链接（即协议、域名、端口与当前页面完全相同的URL），使用download属性非常简单且有效。只需在<a>标签中添加该属性，浏览器在用户点击时就会触发浏览器的下载流程，而不是尝试解析和展示文件内容。
这种方式常用于本站内的静态资源下载，如使用说明、安装包或本地生成的数据文件。
三、跨域链接文件的强制下载及解决方案
需要特别注意的是，download属性存在同源限制。如果href指向的是跨域资源，浏览器出于安全考虑会忽略download属性，仍然尝试在浏览器中打开文件。针对跨域文件的强制下载，我们需要采用其他方案。
1. 后端设置响应头（推荐）
最标准且最可靠的强制下载方式是在服务器端进行配置。通过设置HTTP响应头Content-Disposition为attachment，可以指示客户端将该资源作为附件下载。
以PHP为例，后端代码可以这样写：
<?php
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="下载的文件名.pdf"');
readfile('https://www.ipipp.com/files/document.pdf');
?>通过前端链接指向这个后端接口，即可实现任意跨域文件的强制下载。
2. 前端通过Fetch API转Blob下载
如果跨域服务器配置了CORS允许前端访问，前端可以通过fetch将远程文件读取为二进制大对象（Blob），然后利用URL.createObjectURL()生成一个本地的临时URL，再结合download属性进行下载。这样就绕过了跨域对download属性的限制。
fetch('https://www.ipipp.com/data/config.json')
.then(response => response.blob())
.then(blob => {
// 将Blob对象转换为本地URL
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
// 指定下载的文件名
a.download = 'config.json';
document.body.appendChild(a);
a.click();
// 清理DOM和内存
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
})
.catch(console.error);四、总结
download属性为前端提供了一种极其便捷的强制下载同源文件及重命名文件的方式。但在处理跨域资源下载时，download属性会失效。在实际开发中，我们应根据业务场景选择合适的方案：同源文件直接添加download属性；跨域文件则推荐由后端通过Content-Disposition响应头来控制，或在满足CORS条件的前提下由前端通过Blob实现下载。