代码无法运行求助：点击提交按钮生成PDF并弹出确认模态框

核心问题分析 #

你的代码无法正常运行，主要源于以下几个关键点：

1. 脚本引入顺序错误：Bootstrap 5的jQuery模态框调用依赖jQuery，若jQuery未在Bootstrap JS前引入，$会未定义，导致模态框无法触发；同时html2pdf需在依赖库之后引入，避免API加载不全。
2. PDF内容元素未加入DOM：你创建的content仅存在于内存中，html2pdf依赖的html2canvas无法渲染不在DOM中的元素，直接导致PDF生成失败。
3. html2pdf API使用不当：outputPdf()返回的对象并非直接支持save()方法，冗余的调用逻辑会中断流程。
4. 缺少错误捕获：没有错误处理机制，无法定位生成过程中的报错信息。

修复方案 #

1. 修正脚本引入顺序（页面头部） #

确保依赖库按以下顺序引入：

<!-- jQuery必须在Bootstrap前引入 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- html2pdf最后引入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

2. 调整JavaScript代码 #

document.getElementById("submitBtn").addEventListener("click", function (e) {
  e.preventDefault();

  // 捕获表单数据
  const formData = {
    name: document.getElementById("name").value,
    lastName: document.getElementById("lastName").value,
    SecondlastName: document.getElementById("SecondlastName").value,
    Documentname: document.getElementById("Documentname").value,
    gender: document.getElementById("genderSelect").value,
    dateOfIssuance: document.getElementById("dateOfIssuance").value,
    documentType: document.getElementById("documentTypeSelect").value,
    dateOfBirth: document.getElementById("dateOfBirth").value,
    nationality: document.getElementById("nationality").value,
    dateOfEntry: document.getElementById("dateOfEntry").value,
  };

  // 创建PDF内容容器并添加到DOM（隐藏避免影响页面）
  const content = document.createElement("div");
  content.style.display = "none";
  content.innerHTML = "<h2>表单数据:</h2>";
  Object.keys(formData).forEach((key) => {
    content.innerHTML += `<p><strong>${key}:</strong> ${formData[key]}</p>`;
  });
  document.body.appendChild(content);

  // 生成PDF并触发回调
  html2pdf()
    .from(content)
    .set({
      margin: 10,
      filename: "form_data.pdf",
      image: { type: "jpeg", quality: 0.98 },
      html2canvas: { scale: 2 },
      jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
    })
    .save() // 直接使用html2pdf内置的save方法
    .then(() => {
      $("#confirmationModal").modal("show");
      document.body.removeChild(content); // 清理临时元素
    })
    .catch((error) => {
      console.error("PDF生成失败:", error);
      document.body.removeChild(content);
    });
});

3. 额外检查项 #

• 确认HTML中submitBtn、confirmationModal及所有表单元素的ID无拼写错误。
• 确保Bootstrap模态框的HTML结构完整，包含.modal、.modal-dialog、.modal-content等必要类。

内容的提问来源于stack exchange，提问作者Kai Rodríguez García