答案：通过CSS媒体查询或JavaScript控制打印内容，使用@media print隐藏非表单元素，结合position和visibility属性确保仅表单区域被打印。
表单中的打印功能，核心在于控制你想打印的内容。直接点说，就是让
浏览器
只打印表单区域，而不是整个页面。
解决方案
实现表单打印，最常见的办法是使用 CSS 媒体查询。简单粗暴但有效。
CSS 媒体查询：
定义一个
媒体查询，在这个查询里隐藏页面上所有不需要打印的元素，只显示表单部分。
这里，
是包含表单的 div 的 ID。
隐藏所有元素，然后
再显示表单及其子元素。 注意
的使用，有时候能解决一些布局问题。
JavaScript 辅助：
可以用 JavaScript 动态添加或移除 CSS 类，来控制打印内容。 例如，点击打印按钮时，添加一个只显示表单区域的 CSS 类。
这个方法更直接，但也可能遇到样式丢失的问题，需要仔细调试。 它直接替换了
的内容，打印完再恢复。
如何避免打印出不必要的页面元素？
除了上面提到的CSS媒体查询，还可以考虑以下几点：
专门的打印样式表：
创建一个独立的 CSS 文件，只包含打印相关的样式。 这样可以避免影响页面本身的样式。
告诉浏览器，这个样式表只在打印时生效。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
动态修改 DOM：
在打印前，用 JavaScript 复制表单内容到一个新的、临时的 DOM 元素中，然后打印这个元素。 打印完成后，再把原始表单恢复。 这种方法比较复杂，但可以更精确地控制打印内容。
表单内容过多，如何分页打印？
如果表单内容太多，需要分页打印，可以使用 CSS 的
和
属性。
在表单中需要分页的地方，添加一个带有
类的元素。 例如：
注意，分页效果可能受到浏览器和打印机驱动的影响，需要多测试。 另外，避免在表单元素内部使用分页，可能会导致表单
数据丢失
。 最好是在表单的不同部分之间进行分页。
如何处理表单中的图片和背景色？
默认情况下，浏览器可能不会打印背景色和背景图片。 如果需要打印这些内容，需要设置 CSS 样式：
这个样式会强制浏览器打印颜色和图片。 但要注意，打印背景色可能会消耗大量墨水，建议谨慎使用。 对于图片，可以考虑使用高分辨率的图片，以保证打印质量。
另外，在打印样式表中，可以针对图片进行优化，例如调整大小、裁剪等，以适应打印需求。 避免使用过于复杂的背景图片，可能会影响打印效果。
print
打印表单示例
页面标题
一些其他的页面内容。
表单标题
#printablebody * { visibility: hidden; }#printable, #printable * { visibility: visible; }position: absolutefunction printForm() {
var printArea = document.getElementById('printable');
var originalContent = document.body.innerHTML;
document.body.innerHTML = printArea.innerHTML;
window.print();
document.body.innerHTML = originalContent;
}bodymedia="print"page-break-beforepage-break-after.page-break {
page-break-before: always; /* 在元素之前强制分页 */
}
/* 或者 */
.page-break {
page-break-after: always; /* 在元素之后强制分页 */
}page-breakbody {
-webkit-print-color-adjust: exact; /* Chrome, Safari */
print-color-adjust: exact; /* Firefox */
}