HTML下载属性使用教程

解决方案：

<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 响应头来实现强制下载。 这需要在服务器端进行配置，具体取决于你使用的后端技术。

例如，在 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);
  });