React项目向共享PDF配置文件新增条目时触发InvalidPDFException错误

排查步骤和解决方法 #

1. 验证目标PDF文件本身有效性

• 直接在浏览器地址栏输入完整的PDF路径你的域名/assets/images/certs1/aws_boto3_s3.pdf，确认是否能正常打开
• 下载该文件到本地用PDF阅读器打开，如果打不开就是文件本身损坏，重新导出/上传正确的PDF即可
• 确认文件没有被修改后缀：排查是否存在把docx、png等其他格式文件强行改后缀为.pdf的情况

2. 检查路径和部署配置

• 核对路径大小写拼写：绝大多数线上部署环境（Linux服务器、静态资源托管平台）的资源路径区分大小写，检查文件名是否和配置里的aws_boto3_s3.pdf完全一致，有没有大小写拼写偏差
• 确认文件已正确部署：检查发布包的assets/images/certs1目录下是否存在该文件，排除漏传、部署时被过滤的情况

3. 代码层面添加异常捕获避免整页崩溃

你当前的代码没有处理PDF加载失败的场景，单个PDF加载出错就会触发整页报错，可以补充错误处理逻辑：

import PDF from "react-pdf-js";

function RenderCert({details}) {
    const handlePdfError = (err) => {
        console.error("PDF加载失败:", err, "对应文件路径:", details.cert);
        // 可自定义错误提示UI代替页面崩溃
    }

    if (details.cert != null)
        return(
            <div className="row">
                <div className="col-12">
                    <Card>
                        <PDF 
                            file={details.cert} 
                            onError={handlePdfError}
                        />
                    </Card>
                </div>
            </div>
        );
    else 
        return(
            <div>{details.name}</div>
        );
}

补充验证方法

如果以上步骤排查后问题仍存在，可以把能正常渲染的PDF重命名为aws_boto3_s3.pdf替换现有问题文件，如果替换后可以正常渲染，就可以确定是原问题PDF本身的格式问题，重新生成该PDF即可。

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