如何使用JavaScript将HTML表单转换为可编辑的PDF？

核心问题原因 #

你之前使用的html2pdf类工具核心逻辑是将HTML渲染为Canvas位图，再封装为PDF，生成的文件本质是带图片的静态PDF，没有AcroForm表单域结构，自然无法支持pdftk的字段填充能力。

可行实现方案 #

方案：jsPDF + AcroForm 插件（纯前端/Node.js 均支持） #

这是最适配你需求的方案，你可以先渲染HTML的静态内容到PDF，再对应位置插入可编辑表单域，生成的PDF原生支持pdftk填充。

实现步骤

• 安装依赖

npm install jspdf @jspdf/plugin-acroform

• 基础实现代码示例

import { jsPDF } from "jspdf";
import { AcroFormPlugin } from "@jspdf/plugin-acroform";
jsPDF.registerPlugin(AcroFormPlugin);

const doc = new jsPDF();
// 第一步：渲染HTML静态内容到PDF
doc.html(document.querySelector("#form-static-content"), {
  callback: function (doc) {
    // 第二步：遍历HTML中的表单元素，插入对应PDF表单域
    const formElements = document.querySelectorAll("#my-form input, #my-form select, #my-form textarea");
    formElements.forEach(el => {
      // 像素转PDF pt单位，1px = 0.75pt
      const rect = el.getBoundingClientRect();
      const x = rect.left * 0.75;
      // jsPDF坐标从左下角开始，需换算y轴
      const y = (doc.internal.pageSize.height - rect.bottom * 0.75);
      const width = rect.width * 0.75;
      const height = rect.height * 0.75;
      
      // 根据元素类型插入对应表单域，字段名要和后续pdftk填充的字段名完全一致
      if (el.type === "text" || el.tagName === "TEXTAREA") {
        const textField = new doc.AcroFormTextField();
        textField.fieldName = el.name;
        textField.x = x;
        textField.y = y;
        textField.width = width;
        textField.height = height;
        textField.value = el.value || "";
        doc.addField(textField);
      } else if (el.type === "checkbox") {
        const checkBox = new doc.AcroFormCheckBox();
        checkBox.fieldName = el.name;
        checkBox.x = x;
        checkBox.y = y;
        checkBox.width = height;
        checkBox.height = height;
        checkBox.value = el.checked ? "Yes" : "Off";
        doc.addField(checkBox);
      }
      // 下拉框、单选框等其他类型可参考AcroForm插件API扩展
    });
    // 导出PDF模板
    doc.save("editable-form-template.pdf");
  },
  x: 0,
  y: 0,
  width: doc.internal.pageSize.getWidth(),
  windowWidth: document.body.scrollWidth
});

pdftk 填充对接注意事项 #

• 生成PDF时所有表单域的fieldName必须和填充用的字段键名完全匹配，大小写敏感
• 常用填充命令示例：pdftk editable-form-template.pdf fill_form form-data.fdf output filled-result.pdf flatten
  • 末尾加flatten参数可以将填充后的PDF转为不可编辑的正式文件，按需添加

避坑提示 #

所有基于截图渲染的HTML转PDF工具（包括html2pdf、Puppeteer默认PDF导出等）都无法生成可编辑表单域，不要在这类工具上浪费时间。

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