本教程旨在解决使用 `window.print()` 在移动设备上打印指定 `div` 内容时，却意外打印整个页面的问题。文章将分析传统 `innerhtml` 替换方法的局限性，并提供两种更可靠的解决方案：利用 css `@media print` 媒体查询进行精细控制，以及引入 `print.js` 等专业打印库，以确保在不同设备上都能实现准确、一致的局部打印效果。
在Web开发中，为用户提供打印功能是常见的需求，尤其是在生成发票、报告等场景。通常，我们希望只打印页面中的特定区域，而非整个页面。然而，在使用 window.print() 结合 JavaScript 动态替换 document.body.innerHTML 的方法时，开发者常会遇到一个问题：在桌面浏览器上工作正常，但在移动设备或平板电脑上，却可能意外地打印整个页面。
问题分析：传统 innerHTML 替换方法的局限性
原始的 JavaScript 实现通常通过以下步骤尝试实现局部打印：
- 获取目标 div 的 innerHTML。
- 将 document.body.innerHTML 临时替换为目标 div 的内容。
- 调用 window.print() 触发打印。
- 将 document.body.innerHTML 恢复为原始内容。
- 可选地，重新加载页面。
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML; // 存储原始内容
document.body.innerHTML = printContents; // 替换 body 内容
window.print(); // 触发打印
document.body.innerHTML = originalContents; // 恢复 body 内容
location.reload(); // 重新加载页面
}这种方法的核心在于对 document.body.innerHTML 的操作。虽然在某些桌面浏览器环境下能够奏效，但它存在以下潜在问题：
- 浏览器兼容性差异： 不同浏览器，特别是移动端浏览器，对 innerHTML 的即时替换和 window.print() 的处理机制可能存在差异。在某些环境下，浏览器可能在 innerHTML 恢复之前就完成了打印渲染，或者其内部渲染引擎未能及时响应 body 内容的快速变化。
- 页面状态丢失： 替换 innerHTML 会导致所有 JavaScript 绑定、事件监听器、CSS 样式表引用（如果它们不在替换内容中）以及其他 DOM 状态的丢失。虽然通过 location.reload() 可以恢复，但这会导致页面闪烁和额外的网络请求，用户体验不佳。
- 性能开销： 对于大型页面，获取和替换 innerHTML 可能会带来显著的性能开销。
- 样式丢失： 如果打印内容依赖于外部 CSS 文件，而这些文件没有被包含在替换的 innerHTML 中，或者全局样式被覆盖，打印出来的样式可能会不正确。
鉴于上述局限性，推荐采用更稳定、更专业的解决方案来实现局部打印。
解决方案一：利用 CSS @media print 媒体查询
这是实现局部打印最原生、最推荐的方法之一。通过 CSS 媒体查询，我们可以为打印介质定义一套独立的样式规则，从而精确控制哪些元素可见、哪些隐藏，以及如何布局。
实现步骤：
- 确定要打印的区域：为需要打印的 div 添加一个特定的 ID 或 class，例如 printable-area。
- 隐藏非打印内容：在 CSS 样式表中，使用 @media print 规则来隐藏页面中所有不需要打印的元素。
- 显示并调整打印内容样式：确保 printable-area 在打印时可见，并根据需要调整其布局、字体大小等。
示例代码：
HTML 结构：
网站头部
发票账单
订单号：#12345
客户名称：示例客户
CSS 样式：
/* 默认屏幕样式 */
body {
font-family: Arial, sans-serif;
}
.non-printable {
/* 屏幕显示时可见 */
}
/* 打印样式 */
@media print {
/* 隐藏所有带有 non-printable 类的元素 */
.non-printable,
header,
nav,
footer {
display: none !important;
}
/* 确保要打印的区域可见 */
#printableInvoice {
display: block !important;
/* 可以在这里为打印内容设置特定样式，例如边距、字体大小等 */
margin: 0;
padding: 0;
width: 100%; /* 确保在打印时占据完
整宽度 */
}
/* 如果有其他元素在打印时需要显示，确保它们没有被隐藏 */
}
整宽度 */
}
/* 如果有其他元素在打印时需要显示，确保它们没有被隐藏 */
}使用此方法时，JavaScript 调用 window.print() 即可，无需额外的 DOM 操作。浏览器会根据 @media print 规则自动渲染打印预览。
优点：
- 原生且强大： 完全利用浏览器内置的打印功能，无需第三方库。
- 保持页面状态： 不会破坏原始 DOM 结构和 JavaScript 状态。
- 样式控制灵活： 可以为打印内容提供高度定制化的样式。
- 跨设备一致性： 只要浏览器支持 CSS 媒体查询，就能在不同设备上保持一致的打印行为。
解决方案二：使用专业的 JavaScript 打印库（如 print.js）
对于更复杂或需要更精细控制的打印场景，例如需要打印特定 div 的 HTML 内容、图片、JSON 数据等，或者希望在打印前进行更多处理，使用专门的 JavaScript 打印库是更佳选择。这些库通常能更好地处理跨浏览器兼容性和样式隔离问题。
以 print.js 为例，它提供了一个简洁的 API 来实现各种打印需求。
实现步骤：
- 引入 print.js 库：在 HTML 文件的 或 底部引入 print.js 的 CSS 和 JavaScript 文件。
- 调用 printJS 函数：使用 printJS 函数，指定要打印的元素 ID 和打印类型。
示例代码：
HTML 结构：
使用 Print.js 打印
页面其他内容
这是要打印的标题
这是要打印的段落内容。
- 列表项1
- 列表项2
更多页面内容...
在上述示例中，printJS('print-div', 'html') 会找到 ID 为 print-div 的元素，并将其 HTML 内容提取出来进行打印，而不会影响页面的其他部分。
print.js 的其他功能：
- 打印类型多样： 除了 html，还可以打印 json、pdf、image 等。
- 自定义样式： 可以通过配置选项为打印内容添加自定义 CSS。
- 回调函数： 支持打印前、打印后等事件的回调。
优点：
- 高度兼容性： 库通常会处理各种浏览器兼容性问题，提供更一致的打印体验。
- 功能丰富： 除了 HTML，还可以处理其他类型的数据打印。
- 代码简洁： API 设计直观，易于使用。
- 不影响页面： 库通常会在一个隐藏的 iframe 或新窗口中渲染打印内容，避免修改主页面的 DOM。
总结与注意事项
为了在移动设备上实现稳定且精确的局部打印，建议避免直接通过 document.body.innerHTML 替换内容来调用 window.print()。
- 首选 CSS @media print： 对于大多数只涉及隐藏或调整现有页面元素样式的局部打印需求，CSS @media print 是最优雅、性能最佳且最推荐的解决方案。它利用浏览器原生能力，保持页面状态完整，并提供强大的样式控制。
- 考虑 JavaScript 打印库： 当需要处理更复杂的数据类型（如 PDF、图片）、动态生成打印内容、或需要更细致的打印流程控制时，引入 print.js 这类专业库能够提供更稳定和功能丰富的解决方案。
无论选择哪种方法，都务必在多种浏览器和设备（特别是目标移动设备和桌面浏览器）上进行充分测试，以确保打印效果符合预期。同时，考虑为打印内容优化排版和字体大小，以提供最佳的用户体验。
