ReactJS文件强制下载失败：文件在新标签页打开而非下载

问题原因 #

• 当<a>标签的href是跨域外部URL时，浏览器会出于安全限制忽略download属性，优先以新标签页打开可预览的文件类型（比如PDF）。
• 代码中额外设置了target="blank"，强制在新标签页打开，进一步干扰了下载逻辑。

具体解决方案 #

方案1：移除target属性（基础优化）

先删掉强制新标签页打开的配置，尝试直接触发下载：

const downloadFile = async (file) => {
    const res = await customerServices.paymentInvoice(file);
    setTotalUrl(res.data);
    const fileName = /[^/]*$/.exec(file)[0];
    const link = document.createElement("a");
    link.href = res.data;
    link.setAttribute("download", fileName);
    link.setAttribute("id", "custom-file-click");
    document.body.appendChild(link);
    link.click();
    // 清理DOM冗余元素
    document.body.removeChild(link);
};

注意：如果PDF URL是跨域的，此方案可能仍然无效，因为浏览器对跨域资源的download属性有严格限制。

方案2：通过Blob方式下载（需后端配合CORS）

如果后端允许配置跨域，可先将文件转为本地Blob URL，绕开跨域限制触发下载：

const downloadFile = async (file) => {
    const res = await customerServices.paymentInvoice(file);
    const pdfUrl = res.data;
    setTotalUrl(pdfUrl);
    const fileName = /[^/]*$/.exec(file)[0];

    // 拉取文件并转为Blob
    const response = await fetch(pdfUrl);
    const blob = await response.blob();
    const blobUrl = URL.createObjectURL(blob);

    const link = document.createElement("a");
    link.href = blobUrl;
    link.setAttribute("download", fileName);
    document.body.appendChild(link);
    link.click();
    
    // 清理资源，避免内存泄漏
    document.body.removeChild(link);
    URL.revokeObjectURL(blobUrl);
};

前提：后端需在PDF文件的响应头中配置Access-Control-Allow-Origin，允许你的前端域名跨域访问。

方案3：后端添加响应头（最可靠）

让后端在返回PDF文件时，添加Content-Disposition响应头，强制浏览器识别为附件下载：

Content-Disposition: attachment; filename="invoice.pdf"

配置后，无论前端如何请求，浏览器都会直接触发下载行为，而非预览或打开新标签页。

内容的提问来源于stack exchange，提问作者silentcoder