首先通过CSS媒体查询隐藏非打印元素并设置打印区域，接着使用@page定义页边距、避免分页截断，再通过JavaScript触发window.print()实现打印，同时可动态调整需显示的内容，确保表单在不同设备上打印时布局清晰、内容完整。
HTML表单打印设置的关键在于控制页面布局、隐藏不需要打印的元素，并确保内容在纸张上清晰呈现。通过CSS样式和JavaScript可以有效实现表单的打印功能与样式优化。
使用CSS控制打印样式
浏览器默认会打印整个页面，但通常我们只需要打印表单内容。可以通过CSS媒体查询专门定义打印时的样式：
@media print {
body * {
visibility: hidden;
}
#print-area, #print-area * {
visibility: visible;
}
#print-area {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.no-print {
display: none !important;
}
}
说明：将需要打印的内容包裹在id为print-area的容器内，其余内容在打印时隐藏。添加no-print类的按钮或导航栏不会出现在打印输出中。
调整字体、边距与分页
打印效果受页面边距、字体大小和分页影响较大，建议设置统一格式：
立即学习“前端免费学习笔记（深入）”；
- 使用pt或mm单位设置字体大小（如12pt），更适合打印
- 通过@page规则设置纸张边距：
@page { margin: 20mm; } - 避免内容被截断，使用分页控制：
.section { page-break-inside: avoid; }
通过JavaScript触发打印功能
添加一个打印按钮，点击后调用window.print()方法：
function printForm() {
window.print();
}
可结合临时样式调整，例如在打印前动态显示某些字段或补充信息：
- 打印前显示“打印日期”字段
- 隐藏操作按钮和编辑控件
- 将下拉框的选中值以文本形式展示
基本上就这些。合理使用CSS媒体查询和JavaScript，就能让HTML表单在打印时保持整洁、专业，满足实际使用需求。不复杂但容易忽略细节，比如边距和分页处理。做好预览调试，确保每台设备输出一致。
