表单提交后直接触发打印对话框需阻止默认行为并调用window.print()，推荐在AJAX成功回调中执行；用@media print隐藏非打印元素，或通过iframe打印指定区域，注意Safari兼容性及用户手势触发限制。
表单提交后直接触发浏览器打印对话框
浏览器不支持“自动调用物理打印机”，但可以立即唤起打印预览界面——这是唯一可靠且跨浏览器兼容的方式。关键在于：提交成功后不跳转、不刷新，而是用 window.print() 主动触发。
- 必须确保表单是通过
event.preventDefault()阻止默认提交行为，否则页面刷新会导致print()被中断 - 推荐在 AJAX 提交成功回调中调用
window.print()，例如使用fetch()或axios后的.then() - 若需打印特定区域（如仅打印生成的回执），应提前用 CSS 隐藏无关元素：
@media print { .header, .nav { display: none; } } - 注意：Safari 在某些 iOS 版本中可能延迟触发打印，建议加
setTimeout(() => window.print(), 100)微调时机
如何让打印内容只包含表单提交后的结果
常见错误是整个页面都进打印视图。真正需要的是“提交后动态生成的 DOM 片段”被打印，其他导航、脚本、广告等全部排除。
- 把结果区域包裹在有明确 ID 的容器里，例如
<div id="print-area">...</div> - 打印前临时修改
document.body.innerHTML不安全；更稳妥的做法是创建一个隐藏的<iframe>，把目标 HTML 写入其contentDocument，再对 iframe 调用print() - 或者用 CSS 控制可见性：
@media print { body * { visibility: hidden; } #print-area, #print-area * { visibility: visible; } #print-area { position: absolute; left: 0; top: 0; } - 避免在打印区域使用
background-image或flex布局——部分浏览器默认禁用背景打印，旧版 Edge 对 flex 打印支持差
submit 事件中调用 print() 为什么没反应
这是最常踩的坑：submit 事件未阻止默认行为，导致页面跳转或重载，window.print() 根本没机会执行。
- 检查是否写了
event.preventDefault()—— 少一个分号或拼错 event 名字都会失效 - 确认绑定事件的对象正确：是
form.addEventListener('submit', ...)，不是button或input[type="submit"] - 如果用了
form.submit()方法手动提交，它会绕过所有监听器，无法拦截，也不能触发print() - Chrome 95+ 对非用户手势触发的
print()（如定时器、Promise 回调）会静默拒绝，必须确保调用栈可追溯到 click 或 submit 等用户交互事件
打印样式适配和兼容性要点
打印输出和屏幕渲染差异极大，CSS 必须单独处理，否则拿到的可能是空白页或错位内容。
立即学习“前端免费学习笔记（深入）”；
- 务必声明
@media print块，并在里面重置字体大小（常用pt单位）、行高、边距（@page { margin: 0.5in; }） - 避免使用
vh/vw、position: fixed、transform，这些在多数打印引擎中被忽略或异常 - Firefox 默认不打印背景色，需手动开启：在打印样式中加
-webkit-print-color-adjust: exact; color-adjust: exact; - 测试时不要只看 Chrome DevTools 的 “Rendering → Emulate CSS media → print”，它不模拟真实分页逻辑；真机打印至少验证一次
实际中最容易被忽略的，是用户点击打印后页面仍可滚动或交互——这会导致打印内容被截断。务必在 window.print() 前加 document.body.style.pointerEvents = 'none';，并在 afterprint 事件中恢复（如果需要）。
