React中Base64字符串转PDF遇大文件转换失败求助

问题根源分析 #

你的代码核心问题集中在两点：

1. 未处理Base64前缀：如果传入的Base64字符串带有data:application/pdf;base64,这类前缀，window.atob会解析失败，大文件场景下这个错误会直接导致转换失效（小文件可能因偶然因素未暴露问题）。
2. 低效的分块解析逻辑：原代码循环分块+逐个字符转码的方式，处理大字符串时易出现内存溢出或解析不完整的情况。

修复后的代码 #

const convertToPdf = (b64) => {
    // 移除PDF类型的Base64前缀（如果存在）
    const cleanBase64 = b64.replace(/^data:application\/pdf;base64,/, '');
    
    // 高效将Base64转换为Uint8Array
    const byteCharacters = window.atob(cleanBase64);
    const byteArray = new Uint8Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
        byteArray[i] = byteCharacters.charCodeAt(i);
    }

    const pdfFile = new Blob([byteArray], { type: 'application/pdf' });
    const pdfUrl = URL.createObjectURL(pdfFile);

    // 创建并触发下载链接（需先添加到DOM再点击）
    const downloadLink = document.createElement('a');
    downloadLink.href = pdfUrl;
    downloadLink.download = 'converted.pdf';
    document.body.appendChild(downloadLink);
    downloadLink.click();

    // 清理资源
    URL.revokeObjectURL(pdfUrl);
    document.body.removeChild(downloadLink);
}

关键优化点 #

• 前缀处理：强制移除PDF专属的Base64前缀，确保atob能解析纯Base64内容。
• 简化数组转换：直接创建对应长度的Uint8Array，一次性完成转码，避免分块循环带来的性能和完整性问题。
• DOM元素修正：原代码未将下载链接添加到DOM就触发点击，部分浏览器处理大文件时会阻止该操作，修复后先添加再触发点击。

额外验证建议 #

如果问题仍存在，可检查：

• 传入的Base64是否为有效的PDF文件编码：将Base64复制到本地解码工具，确认能生成正常PDF。
• 浏览器控制台报错：查看是否有内存溢出或解码错误提示，针对性排查。

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