如何使用HTML2PDF创建带可填写字段的交互式PDF表单？

html2pdf 默认调用逻辑不会保留PDF表单交互能力：

• 底层依赖的 html2canvas 默认会把DOM节点渲染为静态位图，不会单独提取表单元素
• 你没有开启enableAcroForm配置项，jsPDF 不会生成可填写的 AcroForm 表单结构
• 你的表单控件没有加name属性，即使开了配置也会被表单渲染逻辑忽略

1. 给所有需要保留交互性的input控件添加唯一的name属性，修正后的表单结构参考：

<form>
  <input type="text" name="reflection_content">
  <br>
  <label for="task_check">Check me</label>
  <input type="checkbox" name="task_status" id="task_check">
</form>

2. 调用html2pdf时传入完整配置，开启表单渲染开关，替换原有的test函数：

function test() {
  const element = document.getElementById('root');
  const pdfConfig = {
    filename: 'my-journal.pdf',
    image: { type: 'jpeg', quality: 0.95 },
    html2canvas: { scale: 2 },
    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
    // 核心配置：开启AcroForm表单支持
    enableAcroForm: true,
    // 复选框交互依赖该配置
    enableLinks: true
  }
  html2pdf().set(pdfConfig).from(element).save();
}

• 不要给表单控件添加transform、filter类CSS属性，否则会导致可点击/填写区域和视觉位置偏移
• 生成的PDF需要用标准PDF阅读器打开（Chrome/Edge内置阅读器、Adobe Acrobat均支持），部分第三方轻量PDF预览工具、社交软件内置预览不支持表单交互，会显示为静态内容
• 0.10.1版本的html2pdf对单选按钮、下拉选择框的支持存在已知bug，仅文本输入框、复选框可稳定生成可交互效果

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