React JS使用pdf-lib读取PDF用户填写值不更新问题

• 当前实现链路存在数据流断层，根本拿不到用户在iframe里输入的内容。
• 传入iframe的是预先转好的base64格式静态PDF链接，浏览器调用内置PDF阅读器渲染时，会把这份静态PDF加载到独立的沙箱上下文里。用户在阅读器界面修改的表单值，仅存在于浏览器内存中的临时渲染副本，完全不会同步回前端状态里存的原始base64数据，也不会修改iframe的src属性。
• 提交时读取docRef.current.src拿到的还是最开始那份带占位值的旧PDF二进制流，自然只能读到最初设置的虚拟占位值，和用户实际输入的内容完全脱钩。
• 受浏览器安全机制限制，没法通过页面JS直接跨沙箱读取内置PDF阅读器内部的用户输入内容，这是所有基于原生iframe渲染PDF方案的天生缺陷。

1. 替换渲染层组件
   放弃原生iframe + 浏览器内置PDF阅读器的组合，改用pdf.js作为前端PDF渲染载体。pdf.js的渲染逻辑运行在和页面JS同上下文的环境里，没有沙箱隔离问题，可以完全控制表单字段的渲染、值读取和回写。
2. 调整PDF加载逻辑
   拿到源PDF的ArrayBuffer后不要立刻转base64塞给iframe，把原始二进制数据存在前端状态中，直接作为pdf.js的初始化渲染源。
3. 改造提交读取逻辑
   • pdf.js渲染完PDF表单字段后，给每个字段绑定实时输入事件，把用户的输入内容同步维护在前端全局的表单值对象中。
   • 点击提交按钮时，直接从维护好的表单值对象中读取用户输入即可。如果需要把填写后的PDF文件上传到后端，也可以通过pdf.js的API把字段值回写到PDF二进制流中，生成新的可上传的PDF文件。
4. 占位值的正确配置方式
   之前为表单字段设置的虚拟占位提示，不要直接当成字段默认值写入PDF流。可以用PDF表单字段的原生占位符接口配置纯展示用的提示文本，这类提示不会被当成实际输入值，不会干扰后续的字段值读取。

• 不要尝试通过postMessage等通信方式从浏览器内置的PDF iframe中提取表单数据，所有主流浏览器的内置PDF查看器都没有开放这类对外通信接口。
• 用pdf-lib在后端预生成表单字段时，记得根据字段的使用场景配置对应参数（比如多行文本开启enableMultiline()、关闭自动排版的冗余参数），避免pdf.js渲染时出现字段显示错位、输入异常的问题。
• 上传用户填写后的PDF时，一定要用带用户输入的新PDF二进制流，不要复用最初加载的静态PDF文件，否则后端拿到的依然是带占位值的空表单。

内容的提问来源于stack exchange，提问作者Muhammad Aadil Banaras