创建动态交互HTML5表单及PDF导出功能的技术咨询

嘿，这个动态表单+PDF导出的需求我之前做过类似的，分两块来拆解就很清晰：动态表单的联动逻辑和表单数据转PDF，给你捋捋具体实现思路和可直接用的代码示例～

核心思路就是监听用户的选择事件（下拉框的change、单选框的click），根据选择结果动态生成对应的后续表单字段。

举你提到的「things」下拉菜单例子，先写基础的HTML结构：

<form id="dynamicForm">
  <div class="form-group">
    <label for="things">选择类别：</label>
    <select id="things" name="things">
      <option value="">请选择</option>
      <option value="pets">宠物</option>
      <option value="clothes">衣物</option>
      <option value="cars">汽车</option>
    </select>
  </div>
  <!-- 动态生成的字段会放在这里 -->
  <div id="dynamicFields"></div>
  <button type="button" id="exportPdf">导出PDF</button>
</form>

然后写JavaScript的联动逻辑，监听下拉框的变化，根据不同选项生成对应的下一级字段：

const thingsSelect = document.getElementById('things');
const dynamicFields = document.getElementById('dynamicFields');

// 定义不同类别对应的后续字段配置
const fieldConfigs = {
  pets: {
    type: 'select',
    label: '宠物类型：',
    name: 'petType',
    options: ['猫', '狗', '仓鼠', '其他']
  },
  clothes: {
    type: 'radio',
    label: '衣物类型：',
    name: 'clothesType',
    options: ['上衣', '裤子', '裙子', '配饰']
  },
  cars: {
    type: 'select',
    label: '汽车品牌：',
    name: 'carBrand',
    options: ['丰田', '大众', '特斯拉', '比亚迪']
  }
};

// 监听下拉框变化
thingsSelect.addEventListener('change', function() {
  const selectedValue = this.value;
  dynamicFields.innerHTML = ''; // 清空之前的动态字段

  if (!selectedValue) return;

  const config = fieldConfigs[selectedValue];
  const fieldContainer = document.createElement('div');
  fieldContainer.className = 'form-group';

  // 添加标签
  const label = document.createElement('label');
  label.textContent = config.label;
  fieldContainer.appendChild(label);

  // 根据配置生成对应字段
  if (config.type === 'select') {
    const select = document.createElement('select');
    select.name = config.name;
    select.innerHTML = '<option value="">请选择</option>' + 
      config.options.map(opt => `<option value="${opt}">${opt}</option>`).join('');
    fieldContainer.appendChild(select);
  } else if (config.type === 'radio') {
    config.options.forEach(opt => {
      const radioWrapper = document.createElement('div');
      const radio = document.createElement('input');
      radio.type = 'radio';
      radio.name = config.name;
      radio.value = opt;
      const radioLabel = document.createElement('span');
      radioLabel.textContent = opt;
      radioWrapper.appendChild(radio);
      radioWrapper.appendChild(radioLabel);
      fieldContainer.appendChild(radioWrapper);
    });
  }

  dynamicFields.appendChild(fieldContainer);
});

这里要注意：如果需要多级联动（比如选了宠物类型后还要再生成下一级字段），可以把上面的逻辑封装成函数，给动态生成的元素也绑定change事件就行～

这部分我常用jsPDF配合html2canvas来实现，核心是先把表单数据整理成一个可打印的HTML结构，再转成PDF。

先引入需要的库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

然后写导出PDF的逻辑：

const exportBtn = document.getElementById('exportPdf');
const form = document.getElementById('dynamicForm');

exportBtn.addEventListener('click', async function() {
  // 先验证表单是否填写完整（可选）
  const formData = new FormData(form);
  let isComplete = true;
  formData.forEach((value, key) => {
    if (!value) isComplete = false;
  });
  if (!isComplete) {
    alert('请填写完整表单！');
    return;
  }

  // 创建一个用于生成PDF的临时容器
  const pdfContainer = document.createElement('div');
  pdfContainer.style.padding = '20px';
  pdfContainer.style.maxWidth = '600px';
  pdfContainer.style.margin = '0 auto';

  // 把表单数据转换成可读的HTML内容
  const formElements = form.querySelectorAll('select, input[type="radio"]:checked');
  formElements.forEach(el => {
    const row = document.createElement('div');
    row.style.marginBottom = '15px';
    row.style.display = 'flex';
    row.style.justifyContent = 'space-between';
    const label = document.querySelector(`label[for="${el.id}"]`) || el.closest('.form-group').querySelector('label');
    row.innerHTML = `<strong>${label.textContent}</strong>: ${el.value}`;
    pdfContainer.appendChild(row);
  });

  // 把临时容器添加到页面（html2canvas需要元素在DOM中）
  document.body.appendChild(pdfContainer);

  // 生成PDF
  const { jsPDF } = window.jspdf;
  const doc = new jsPDF('p', 'mm', 'a4');
  const canvas = await html2canvas(pdfContainer);
  const imgData = canvas.toDataURL('image/png');
  const imgWidth = 210; // A4宽度（mm）
  const pageHeight = 297; // A4高度（mm）
  const imgHeight = (canvas.height * imgWidth) / canvas.width;
  let heightLeft = imgHeight;
  let position = 0;

  doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
  heightLeft -= pageHeight;

  // 如果内容超过一页，添加新页面
  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    doc.addPage();
    doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;
  }

  // 保存PDF，换成doc.open()可在线查看，doc.autoPrint()可直接打印
  doc.save('表单数据.pdf');

  // 移除临时容器
  document.body.removeChild(pdfContainer);
});

• 动态生成字段时，最好给每个字段加唯一的id，方便后续获取数据和绑定事件
• 可以给表单加一些基础样式，让动态生成的字段和原生字段风格统一
• 如果表单逻辑复杂，比如有很多级联动，可以考虑用Vue/React这类框架来管理状态，会比原生JS更省心

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