使用 标签的 download 属性可直接触发下载并指定文件名，如 ；2. 对于不支持 download 属性的老旧浏览器，可通过后端设置 content-disposition: attachment 响应头强制下载；3. download 属性在跨域资源上可能因安全限制失效，需服务器配置 cors 头部或使用 fetch api 获取 blob 后创建临时下载链接，通过 javascript 模拟点击完成下载并释放 url，以解决跨域问题。
download 属性用于指定浏览器下载链接指向的资源，而不是导航到该资源。它可以直接触发下载，并且可以指定下载文件的名称。
解决方案：
使用 <a></a> 标签的 download 属性。只需要在 <a></a> 标签中添加 download 属性即可。这个属性可以不设置值，或者设置为你希望下载的文件名。
<a href="path/to/your/file.pdf" download="指定下载的文件名.pdf">下载PDF文件</a> <a href="path/to/your/image.jpg" download>下载图片</a>
当用户点击这个链接时，浏览器会尝试下载 file.pdf 文件，并将其保存为 指定下载的文件名.pdf（如果指定了文件名）。 如果没有指定文件名，浏览器通常会使用原始文件名。
如何处理浏览器不支持 download 属性的情况？
虽然现代浏览器基本都支持 download 属性，但为了兼容老旧浏览器，可以结合后端设置 Content-Disposition 响应头来实现强制下载。 这需要在服务器端进行配置，具体取决于你使用的后端技术。
将 WCAG 2 AA 无障碍标准应用于设计系统、UI 组件和网页——通过可运行的验证器进行对比度计算，采用设计 token 模式使颜色天生可访问，设定排版和焦点状态规则，并提供语义检查清单。适用于构建或审查 UI。
例如，在 PHP 中，你可以这样设置：
<?php
$file = 'path/to/your/file.pdf';
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="指定下载的文件名.pdf"');
header('Content-Length: ' . filesize($file));
readfile($file);
exit;
?>这段代码会强制浏览器将文件作为附件下载，而不是尝试在浏览器中打开。
download 属性对跨域资源有效吗？
download 属性在同源情况下工作良好。 但是，对于跨域资源，由于浏览器的安全限制，直接使用 download 属性可能无法生效。
解决跨域下载问题，通常需要服务器端的配合，例如设置 Access-Control-Expose-Headers 响应头，允许客户端访问 Content-Disposition 头部。
另外一个方法是使用 JavaScript 来发起下载，例如使用 fetch API 获取文件内容，然后创建一个 Blob 对象，并使用 URL.createObjectURL 创建一个下载链接。 这种方法可以绕过一些跨域限制，但仍然需要服务器端的适当配置。
fetch('https://example.com/path/to/your/file.pdf', {mode: 'cors'})
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = '指定下载的文件名.pdf';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});这个方法首先使用 fetch 获取跨域资源，然后将其转换为 Blob 对象。 接着，创建一个临时的 <a></a> 标签，并设置其 href 属性为 Blob 对象的 URL。 最后，模拟点击这个链接，触发下载。 记得在下载完成后，释放 Blob 对象的 URL，避免内存泄漏。 这种方法相对复杂，但可以在一定程度上解决跨域下载的问题。
