强制下载文件：<a href="file.pdf" download>点击下载</a>

在HTML中，强制下载文件是一个常见的需求，尤其是当用户需要直接保存文件而不是在浏览器中打开时。通过download属性可以轻松实现这一功能，同时还能自定义下载的文件名。

使用download属性强制下载

<a>标签的download属性告诉浏览器直接下载链接的资源，而不是尝试打开它。基本语法如下：

<a href="file.pdf" download>点击下载PDF</a>

当用户点击这个链接时，浏览器会直接下载file.pdf文件。如果没有download属性，浏览器可能会尝试在标签页或PDF阅读器中打开文件。

自定义下载文件名

download属性还可以指定下载时的文件名。例如：

<a href="file.pdf" download="custom-name.pdf">点击下载并重命名</a>

这样，下载的文件会保存为custom-name.pdf，而不是服务器上的原始文件名。

动态生成下载链接

在实际开发中，可能需要通过JavaScript动态生成下载链接。以下是一个示例：

<button id="downloadBtn">生成下载链接</button>
<script>
  document.getElementById('downloadBtn').addEventListener('click', function() {
    const link = document.createElement('a');
    link.href = 'file.pdf';
    link.download = 'dynamic-file.pdf';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  });
</script>

点击按钮后，会动态创建一个下载链接并触发点击事件，实现文件下载。

处理跨域资源

如果文件位于其他域名下，download属性可能会失效，因为浏览器出于安全限制不允许直接下载跨域资源。此时可以通过服务器代理或CORS解决。例如：

<a href="/proxy?url=http://example.com/file.pdf" download>下载跨域文件</a>

服务器端需要实现一个代理接口，将文件内容返回给前端。

结合Blob对象实现前端下载

对于动态生成的内容（如用户输入的数据），可以通过Blob对象创建文件并下载：

<textarea id="content" placeholder="输入文本内容"></textarea>
<button id="saveText">保存为文本文件</button>
<script>
  document.getElementById('saveText').addEventListener('click', function() {
    const text = document.getElementById('content').value;
    const blob = new Blob([text], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'user-content.txt';
    link.click();
    URL.revokeObjectURL(url);
  });
</script>

多文件打包下载

有时需要将多个文件打包成一个ZIP下载。可以使用JSZip库实现：

<button id="downloadZip">下载多个文件</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script>
  document.getElementById('downloadZip').addEventListener('click', async function() {
    const zip = new JSZip();
    zip.file('file1.txt', '这是第一个文件内容');
    zip.file('file2.txt', '这是第二个文件内容');
    const content = await zip.generateAsync({ type: 'blob' });
    const url = URL.createObjectURL(content);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'files.zip';
    link.click();
    URL.revokeObjectURL(url);
  });
</script>

浏览器兼容性注意事项

虽然现代浏览器都支持download属性，但仍有几点需要注意：

• 在Safari中，跨域资源可能无法使用download属性
• IE11及以下版本不支持该属性
• 移动端浏览器的行为可能不一致

可以通过特性检测来提供备用方案：

<script>
  function forceDownload(url, filename) {
    if ('download' in document.createElement('a')) {
      const link = document.createElement('a');
      link.href = url;
      link.download = filename || url.split('/').pop();
      link.click();
    } else {
      window.open(url, '_blank');
    }
  }
</script>

结合服务端设置强制下载

除了前端实现，还可以通过服务端设置响应头来强制下载：

Content-Disposition: attachment; filename="file.pdf"
Content-Type: application/octet-stream

这样即使没有download属性，浏览器也会直接下载文件。