填写表单并提交后html2pdf功能失效，空表单时正常的问题求助

嘿，我之前也碰到过一模一样的情况！问题的核心在于表单提交的默认行为会触发页面刷新，导致html2pdf的异步生成流程还没完成就被中断了。而空表单时大概率是因为表单验证没通过，提交操作被阻止，页面没刷新，所以html2pdf能正常运行。

解决方案：阻止默认提交行为，手动控制流程 #

你需要先阻止表单的默认提交动作，等html2pdf完成PDF生成并下载后，再手动提交表单（如果确实需要提交的话）。这里有两种实现方式：

方式1：修改按钮点击事件

直接在download按钮的点击事件里阻止默认行为，完成PDF生成后再提交表单：

window.onload = function () {
  const downloadBtn = document.getElementById("download");
  // 获取按钮所在的表单（如果你的按钮不在表单里，这一步可以跳过）
  const targetForm = downloadBtn.closest('form');

  downloadBtn.addEventListener("click", (e) => {
    // 关键：阻止默认的表单提交行为，避免页面刷新
    e.preventDefault();

    const invoice = document.getElementById("invoice");
    console.log(invoice);
    console.log(window);
    
    var opt = {
      margin: 0,
      filename: 'myfile.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 1 },
      jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
    };

    // 生成PDF，完成后再手动提交表单（如果不需要提交表单就去掉这一步）
    html2pdf().from(invoice).set(opt).save().then(() => {
      if (targetForm) {
        targetForm.submit();
      }
    });
  });
}

方式2：监听表单的submit事件（更可靠）

如果表单可能通过其他方式提交（比如用户按回车），监听表单的submit事件会更稳妥：

window.onload = function () {
  // 替换成你的表单选择器，比如#myForm
  const targetForm = document.querySelector('form');

  targetForm.addEventListener("submit", (e) => {
    // 阻止默认提交
    e.preventDefault();

    const invoice = document.getElementById("invoice");
    
    var opt = {
      margin: 0,
      filename: 'myfile.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 1 },
      jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
    };

    // 生成PDF后提交表单
    html2pdf().from(invoice).set(opt).save().then(() => {
      targetForm.submit();
    });
  });
}

关键知识点 #

• e.preventDefault()：这行代码会阻止浏览器执行元素的默认行为（比如submit按钮的表单提交、a标签的跳转），确保html2pdf有足够时间完成PDF生成。
• html2pdf的save()方法返回一个Promise，所以可以用.then()在PDF下载完成后再执行后续操作（比如提交表单）。

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