react-pdf-viewer中已勾选单选框显示为[ ]的问题求助

可能原因 #

react-pdf-viewer默认可能未正确解析或渲染PDF中的已填写表单域状态，尤其是单选框这类元素，大概率是缺少表单相关配置，或是版本兼容性导致的解析bug。

解决方案 #

1. 启用表单渲染支持 #

如果使用的是react-pdf-viewer最新版本，初始化Viewer组件时需明确开启表单功能。若用了defaultLayoutPlugin，要在配置中打开表单支持：

import { Viewer, defaultLayoutPlugin } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';

// 初始化默认布局插件并启用表单
const defaultLayoutPluginInstance = defaultLayoutPlugin({
    enableForm: true, // 关键配置：开启表单域渲染
});

function App() {
    return (
        <div style={{ height: '100vh' }}>
            <Viewer
                fileUrl="/filled-out.pdf"
                plugins={[defaultLayoutPluginInstance]}
            />
        </div>
    );
}

2. 升级到最新稳定版 #

旧版本可能存在表单域解析缺陷，执行命令升级依赖：

npm update @react-pdf-viewer/core @react-pdf-viewer/default-layout

3. 验证PDF表单类型 #

确保你的PDF是AcroForm类型（多数可填写PDF属于此类），如果是XFA表单，react-pdf-viewer支持有限，建议将PDF转换为AcroForm格式后再测试。

4. 手动解析表单状态（兜底方案） #

若上述方法无效，可通过文档加载事件获取表单数据，自定义处理单选框状态：

import { Viewer, Document } from '@react-pdf-viewer/core';

function App() {
    const handleDocumentLoad = (document: Document) => {
        // 获取所有表单域
        const fields = document.getFields();
        // 遍历检查单选框选中状态
        fields.forEach(field => {
            if (field.type === 'Radio') {
                console.log(`单选框${field.name}选中状态:`, field.value);
                // 可根据此状态自定义渲染逻辑
            }
        });
    };

    return (
        <div style={{ height: '100vh' }}>
            <Viewer
                fileUrl="/filled-out.pdf"
                onDocumentLoadSuccess={handleDocumentLoad}
            />
        </div>
    );
}

额外提示 #

如果配置和升级后问题仍存在，可能是PDF自身表单域有异常，用Adobe Acrobat重新保存PDF，确保选中状态被正确存储后再测试。

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