React中TypeScript下载PDF有时不弹出Chrome下载窗口的排查与解决

我在React应用中使用以下TypeScript代码实现PDF文件下载：

const handleDownloadPdf = async (pdfUrl: string) => {
    if (!pdfUrl) {
        toast.error("PDF url is null");
        return;
    }
    try {
        const response = await fetch(pdfUrl);
        const blob = await response.blob();
        const downloadUrl = window.URL.createObjectURL(new Blob([blob]));
        const link = document.createElement('a');
        link.href = downloadUrl;
        link.setAttribute('download', new Date().getTime() + '.pdf');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    } catch (error) {
        console.error('Error downloading PDF:', error);
    }
}

但调用该函数时，Google Chrome浏览器有时不会弹出下载窗口。已确认文件URL可正常访问，调试时无错误输出，示例URL：https://tex.example.top/tex/static/proj/2024/1/12c1b7d559944c47bafb756dd60d4a33/main.pdf?v=d252a45c474d44bf94de97dc144aa924

可能的原因 #

• Chrome交互安全策略拦截：Chrome会拦截非用户直接交互触发的下载操作。原代码中fetch是异步操作，await后执行link.click()时，可能已经脱离了用户点击按钮等原始交互的上下文，被浏览器判定为自动下载从而拦截。
• 冗余Blob创建：已通过response.blob()拿到Blob对象，无需再用new Blob([blob])包裹，多余的包装可能导致Blob对象处理异常。
• 未清理URL对象：URL.createObjectURL创建的对象未主动释放，可能导致内存泄漏，也可能干扰后续下载流程。

修复方案 #

方案一：优化现有fetch流程，保留交互上下文 #

提前创建并添加链接到DOM，确保click操作处于用户交互的上下文范围内，同时清理资源：

const handleDownloadPdf = async (pdfUrl: string) => {
    if (!pdfUrl) {
        toast.error("PDF url is null");
        return;
    }
    try {
        // 提前创建链接并挂载到DOM，避免异步操作丢失交互上下文
        const link = document.createElement('a');
        document.body.appendChild(link);

        const response = await fetch(pdfUrl);
        const blob = await response.blob();
        const downloadUrl = window.URL.createObjectURL(blob); // 直接使用获取到的Blob
        
        link.href = downloadUrl;
        link.setAttribute('download', `${new Date().getTime()}.pdf`);
        link.click();

        // 清理DOM和URL资源
        document.body.removeChild(link);
        window.URL.revokeObjectURL(downloadUrl); // 主动释放URL对象
    } catch (error) {
        console.error('Error downloading PDF:', error);
    }
}

方案二：直接使用a标签跳转（适用于CORS允许的场景） #

如果PDF文件所在域名允许跨域访问（或同域），可跳过fetch步骤，直接通过a标签触发下载，确保click在用户同步交互流程中执行：

const handleDownloadPdf = (pdfUrl: string) => {
    if (!pdfUrl) {
        toast.error("PDF url is null");
        return;
    }
    const link = document.createElement('a');
    link.href = pdfUrl;
    link.setAttribute('download', `${new Date().getTime()}.pdf`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

该方案完全规避了异步操作导致的上下文丢失问题，兼容性和稳定性更好，但需要确保目标URL的CORS配置允许直接下载（无需跨域资源验证）。

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