表单填写后无法下载PDF空表单正常的问题求助（附PHP及JS代码）

核心故障原因（概率从高到低） #

• 下载按钮默认触发了表单提交行为
  下载按钮如果放在<form>标签内部，未指定type="button"的话，默认是submit类型。空表单状态下点击时，如果你表单配置了HTML5必填项校验，校验不通过不会触发表单提交，下载逻辑可以正常执行；填写完所有必填项后点击按钮，会先触发表单提交，页面发生POST刷新，PDF导出逻辑还没执行就被中断，自然没有响应。
• 表单提交后JS事件绑定失效
  你当前的下载按钮点击事件只在window.onload时绑定一次，原生表单提交会刷新页面，PHP输出的邮件发送提示脚本如果存在报错（比如未引入sweetalert库导致swal is not defined报错），会阻塞后续JS执行，导致下载按钮的点击事件没有重新绑定，点击自然没有反应。
• 表单内容导致html2pdf渲染失败
  填写内容后，要导出的#invoice节点如果存在跨域资源、特殊CSS样式（fixed定位、transform、溢出隐藏等）、未闭合标签，会导致html2canvas渲染中断，PDF生成失败。

修复方案 #

1. 优先修改下载按钮属性，避免触发表单提交
   给下载按钮明确添加type="button"属性：

   <button type="button" id="download">导出PDF</button>
   

2. 避免原生表单提交刷新页面
   改用AJAX异步提交表单数据，提交成功后再触发PDF导出逻辑，不会导致页面重刷，事件绑定不会失效。
3. 排查控制台报错
   打开浏览器F12开发者工具，切换到「控制台」标签，点击下载按钮查看是否有JS报错，根据报错信息定位具体问题，比如缺少sweetalert依赖就补充引入对应资源。
4. 开启html2canvas日志排查渲染问题
   给html2pdf配置添加日志输出，查看渲染过程的异常节点：

   window.onload = function () {
       document.getElementById("download")
           .addEventListener("click", () => {
               const invoice = document.getElementById("invoice");
               var opt = {
                   margin: 0,
                   filename: 'myfile.pdf',
                   image: { type: 'jpeg', quality: 0.98 },
                   html2canvas: { scale: 1, logging: true },
                   jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
               };
               html2pdf().from(invoice).set(opt).save();
           })
   }
   

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