React嵌入PDF显示异常：显示当前页面而非PDF文件求助

问题根源 #

你指定的PDF路径/src/document/file.pdf是项目源码目录内的路径，React开发/构建环境中，浏览器无法直接访问src目录下的资源。当浏览器找不到目标PDF文件时，SPA的路由 fallback 机制会加载当前页面，导致显示区域出现嵌套的网页内容。

解决方案 #

1. 调整PDF文件存放位置

将file.pdf移动到项目根目录的public文件夹下，建议创建子目录归类（比如public/documents），确保文件处于浏览器可直接访问的静态资源目录。

2. 修改路径配置

在DocumentDisplay组件中，更新requestDocument函数的返回路径，指向public目录下的PDF文件：

export const DocumentDisplay = ({ documentId }) => {
    function requestDocument(documentId){
        if(documentId == 0)
            // 对应public/documents/file.pdf的访问路径
            return `${process.env.PUBLIC_URL}/documents/file.pdf`
    }
    
    return <>
        <Model document={requestDocument(documentId)}></Model>
    </>
}

• 用process.env.PUBLIC_URL是为了兼容Create React App的不同部署场景（比如子路径部署），如果是简单的本地开发，直接写/documents/file.pdf也可以。

3. 验证组件渲染

修改后，Model组件的object标签就能正确加载到PDF文件，不再 fallback 显示当前页面。

后续接口请求注意事项 #

当后续对接后端获取PDF时，确保接口返回的是：

• 可直接访问的PDF资源URL
• 正确的PDF文件流（需设置响应头Content-Type: application/pdf）

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