如何从动态HTML生成PDF？表单动态字段适配问题求助

我来帮你搞定这个动态HTML生成PDF的问题，核心是把硬编码的表单字段和后端处理改成动态逻辑，这样不管用户添加多少字段，都能自动生成对应的PDF内容。

第一步：调整前端表单的字段命名（推荐更简洁的数组方式） #

你原来的前端代码给每个新增字段命名为p_scnt1、p_scnt2，这种方式处理起来比较繁琐，改成数组命名会更高效。修改你的forma.php里的输入框name属性：

<!-- 把原来的name="p_scnt1"改成name="p_scnt[]"，p_more同理 -->
<input type="text" size="20" name="p_scnt[]"/>
<input type="text" size="20" name="p_more[]"/>

然后简化jQuery的克隆逻辑，不需要再手动修改name和id了（数组形式的name会被PHP自动识别为数组）：

$(function() {
  var scntDiv = $('#p_scents');
  
  $('.addScnt').bind('click', function() {
    // 克隆第一个字段行，保留事件绑定
    var newLine = $('p.scent:first', scntDiv).clone(true);
    // 清空克隆后的输入框内容
    newLine.find('input').val('');
    // 插入到当前点击的字段行后面
    newLine.insertAfter($(this).closest('p.scent'));
    // 聚焦到新行的第一个输入框
    newLine.find('input:first').focus();
    return false;
  });

  $('.remScnt').bind('click', function() {
    // 至少保留一行字段，防止全部删光
    if($('p.scent', scntDiv).length > 1) {
      $(this).parents('p.scent').remove();
    }
    return false;
  });
});

另外，注意修正HTML里的重复标签问题（你原来的代码里有重复的</head>和<body>），保持结构正确：

<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <!-- 建议用最新版jQuery，老版本存在安全隐患 -->
  <style type="text/css">
    div{ padding:8px; }
  </style>
</head>
<body>
  <form method="post" action="html_pdf.php">
    <div id="p_scents">
      <p class="scent">
        <label for="p_scnts1">Input Value</label>
        <input type="text" size="20" name="p_scnt[]"/>
        <label for="p_more1">Input more</label>
        <input type="text" size="20" name="p_more[]"/>
        <a href="#" class="addScnt">Add</a>
        <a href="#" class="remScnt">Remove</a>
      </p>
    </div>
    <input type='submit' value='submit' name="submit" id='submit'>
  </form>
</body>

第二步：后端动态处理表单数据，生成动态HTML #

现在html_pdf.php里，PHP会接收到两个数组：$_POST['p_scnt']和$_POST['p_more']，分别对应所有用户输入的字段值。我们可以循环这两个数组来动态生成表格行：

<?php
if(isset($_POST['submit'])) {
  // 获取字段数组，默认空数组避免报错
  $pScnt = $_POST['p_scnt'] ?? [];
  $pMore = $_POST['p_more'] ?? [];
  
  // 过滤空字段（可选，根据需求调整）
  $filteredData = [];
  foreach($pScnt as $index => $scntVal) {
    $moreVal = $pMore[$index] ?? '';
    if(!empty(trim($scntVal)) || !empty(trim($moreVal))) {
      $filteredData[] = [
        'scnt' => htmlspecialchars($scntVal), // 转义HTML防止XSS和语法错误
        'more' => htmlspecialchars($moreVal)
      ];
    }
  }
}
?>
<body>
  <div class="container">
    <table class="table">
      <thead>
        <tr>
          <th>Input Value</th> <!-- 这里应该是固定表头，不是用户输入的值哦 -->
          <th>Input More</th>
        </tr>
      </thead>
      <tbody>
        <?php if(isset($filteredData) && !empty($filteredData)): ?>
          <?php foreach($filteredData as $row): ?>
            <tr>
              <td><?php echo $row['scnt']; ?></td>
              <td><?php echo $row['more']; ?></td>
            </tr>
          <?php endforeach; ?>
        <?php else: ?>
          <tr>
            <td colspan="2">没有添加任何字段</td>
          </tr>
        <?php endif; ?>
      </tbody>
    </table>
  </div>
</body>

关键说明： #

1. 数组命名的优势：不管用户添加多少个字段，PHP都会自动收集同名的name="xxx[]"为数组，不需要手动处理p_scnt1、p_scnt2这类序号命名。
2. HTML转义：用htmlspecialchars()转义用户输入内容，既可以防止XSS攻击，也能避免HTML语法错误。
3. 空值过滤：可选步骤，如果你不想显示空的表格行，可以过滤掉没有输入内容的字段。
4. 表头修正：你原来的代码把用户输入的值作为表头，这应该是个失误，表头应该固定显示字段名称，用户输入的内容放在表格主体里。

最后：生成PDF #

当你生成了动态HTML后，就可以用PDF生成库（比如dompdf、TCPDF、wkhtmltopdf）把HTML转换成PDF。举个dompdf的简单示例（需要先安装dompdf）：

// 在html_pdf.php的末尾添加PDF生成代码
require_once 'dompdf/autoload.inc.php';
use Dompdf\Dompdf;

ob_start(); // 开启输出缓冲，捕获HTML内容
?>
<!-- 这里放上面的动态HTML代码 -->
<?php
$html = ob_get_clean();

$dompdf = new Dompdf();
$dompdf->loadHtml($html);
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();
// 输出PDF给用户下载
$dompdf->stream('dynamic_form.pdf');

这样不管用户添加多少个字段，PDF里都会自动生成对应的表格行啦！

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