给<a>标签设置了download属性， 浏览器没有下载而是打开新标签，这个问题通常有以下几个原因：

1. 同源策略限制

download 属性只在同源 URL 或 blob/data URL 上有效：

<!-- 同源文件 - 可以下载 -->
<a href="/files/document.pdf" download>下载PDF</a>

<!-- 跨域文件 - 可能在新标签打开 -->
<a href="https://other-domain.com/file.pdf" download>可能不会下载</a>

2. 服务器 MIME 类型设置

检查服务器返回的 Content-Disposition 头：

<!-- 即使设置了download，如果服务器返回的是可预览类型，浏览器可能选择打开 -->
<a href="image.png" download>点击测试</a>

3. 浏览器兼容性

某些浏览器对 download 属性的支持有限制。

解决方案

方案1：使用同源文件

<!-- 确保文件在同一域名下 -->
<a href="/your-file.pdf" download="filename.pdf">下载文件</a>

方案2：通过 JavaScript 处理跨域下载

javascript

// 使用 fetch + blob 方式下载
async function downloadFile(url, filename) {
    try {
        const response = await fetch(url);
        const blob = await response.blob();
        const blobUrl = URL.createObjectURL(blob);
        
        const a = document.createElement('a');
        a.href = blobUrl;
        a.download = filename || 'download';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(blobUrl);
    } catch (error) {
        console.error('下载失败:', error);
    }
}

// 使用示例
downloadFile('https://example.com/file.pdf', 'my-file.pdf');

方案3：服务器端设置响应头

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

方案4：检查实际代码

<!-- 正确的用法 -->
<a href="file.pdf" download="自定义文件名.pdf">下载</a>

<!-- 可能有问题的情况 -->
<a href="https://其他网站.com/file.pdf" download>可能不会下载</a>
<a href="#" download>缺少href或href无效</a>

调试步骤

1. 检查浏览器控制台是否有错误信息
2. 查看网络面板确认文件请求状态
3. 检查响应头中的 Content-Disposition
4. 测试不同浏览器看是否是兼容性问题

个人推荐 一般情况下使用方案一

<!-- 假如你的文件名是https://other-domain.com/file.pdf 直接省略域名使用下面的写法-->
<a href="/files/document.pdf" download>下载PDF</a>

vite 配置 https

1、安装所需命令

// 创建证书颁发机构
// 将生成一个根证书 ca.crt 和对应的私钥 ca.key
npx mkcert create-ca

// 创建证书
// 为特定域名生成的证书cert.crt、对应的私钥cert.key

mkcert create-cert

对生成ca.crt进行安装

注意的是安装证书存储选择受信任的根证书颁发机构，其他操作闭眼睛一路通过即可

• 双击ca.crt
• 点击安装证书
• 存储位置选择 当前用户 其实哪都行 然后下一步
• 选择将所有证书都放入下列存储
• 点击 浏览 选择 受信任的根证书颁发机构 确定
• 无脑下一步 完成

vite 中配置证书

import { resolve } from 'path'
import fs from 'node:fs'

server: {
host: '0.0.0.0',
    https: {
      key: fs.readFileSync(resolve(__dirname, 'cert.key')), // 私钥
      cert: fs.readFileSync(resolve(__dirname, 'cert.crt')), // 证书
    },
}