Window print() 方法（超详细）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代网页开发中，打印功能是一个看似基础却容易被忽视的核心能力。无论是生成订单凭证、打印报告文档，还是输出学习资料，开发者都需要通过代码实现精准控制。本文聚焦于 Window print() 方法，从基础语法到高级技巧，结合实战案例，帮助读者全面掌握这一功能的实现逻辑与最佳实践。

Window print() 方法：基础语法与核心概念

什么是 Window.print()？

Window.print() 是浏览器提供的一个内置方法，属于 window 对象的一部分。它允许开发者通过 JavaScript 直接触发浏览器的打印对话框，用户随后可以选择打印机、纸张方向、页边距等选项，最终将当前页面或指定内容输出为纸质或电子文档。

形象比喻：
可以将 window.print() 想象为网页的“虚拟打印机开关”。就像按下物理打印机上的打印按钮一样，该方法向浏览器发送指令，启动打印流程。

最简代码示例

// 直接调用 print() 方法  
window.print();  

或者通过按钮触发：

<button onclick="window.print()">打印当前页面</button>  

关键特性总结

1. 无需参数：print() 方法不接受任何参数，其行为完全由浏览器和用户的打印设置决定。
2. 跨浏览器兼容：主流浏览器（Chrome、Firefox、Safari 等）均支持该方法。
3. 非阻塞性：调用后不会阻塞 JavaScript 执行，但会中断当前页面的视觉交互（如动画）。

进阶用法：控制打印内容与样式

问题场景：如何只打印部分内容？

默认情况下，window.print() 会打印整个页面。若需仅打印特定区域（如订单详情或表格），需结合 CSS 或 JavaScript 动态隐藏无关元素。

方法一：CSS 媒体查询优化

通过 @media print 规则，定义打印时的样式：

/* 默认视口样式 */  
body {  
  padding: 20px;  
}  

/* 打印时隐藏导航栏和侧边栏 */  
@media print {  
  .header, .sidebar {  
    display: none !important;  
  }  
  /* 调整文字大小与边距 */  
  body {  
    font-size: 12pt;  
    margin: 1cm;  
  }  
}  

方法二：动态修改 DOM

通过 JavaScript 隐藏或显示元素：

function prepareForPrint() {  
  // 隐藏导航栏  
  document.querySelector('.navbar').style.display = 'none';  
  // 显示打印专用内容  
  document.querySelector('#print-content').style.display = 'block';  
  // 延迟调用 print() 确保样式生效  
  setTimeout(() => window.print(), 100);  
}  

表格：打印样式常见需求与解决方案

（注意：表格前空一行）
| 需求描述 | 解决方案 |
|------------------------|--------------------------------------------------------------------------|
| 隐藏特定元素 | 使用 @media print 设置 display: none |
| 调整打印区域边距 | 通过 @page 规则定义 margin 属性 |
| 移除背景色与图片 | 添加 * { background: none !important; } |
| 强制分页 | 在目标位置插入 <div style="page-break-before: always;"></div> |

实战案例：电商订单打印功能

场景描述

假设有一个电商网站，用户下单后需要生成订单详情页，并提供一键打印功能。要求：

1. 打印时仅显示订单信息，隐藏顶部导航栏和侧边栏。
2. 页眉添加店铺 logo 和订单编号。
3. 表格内容按 A4 纸张布局。

实现步骤

1. HTML 结构

<div class="container">  
  <header class="header">  
    <!-- 导航栏内容 -->  
  </header>  
  <div class="content">  
    <div id="print-area">  
      <h1>订单详情</h1>  
      <table>  
        <tr><th>订单号</th><td>{{order_id}}</td></tr>  
        <tr><th>商品</th><td>{{product_name}}</td></tr>  
        <tr><th>金额</th><td>{{total_price}}</td></tr>  
      </table>  
    </div>  
  </div>  
  <button onclick="printOrder()">打印订单</button>  
</div>  

2. CSS 打印样式

/* 默认屏幕样式 */  
.header {  
  position: fixed;  
  top: 0;  
  width: 100%;  
}  

/* 打印样式覆盖 */  
@media print {  
  /* 隐藏导航栏 */  
  .header { display: none; }  
  /* 显示打印区域 */  
  #print-area {  
    padding: 2cm;  
    font-family: Arial, sans-serif;  
  }  
  /* 表格样式 */  
  table {  
    width: 100%;  
    border-collapse: collapse;  
  }  
  th, td {  
    border: 1px solid #000;  
    padding: 8px;  
  }  
  /* 强制分页 */  
  @page {  
    size: A4;  
    margin: 1.5cm;  
  }  
}  

3. JavaScript 触发逻辑

function printOrder() {  
  // 动态插入页眉信息  
  const header = document.createElement('div');  
  header.style.textAlign = 'center';  
  header.innerHTML = `<img src="logo.png" width="100">  
                      <h2>订单号：${document.querySelector('#order_id').textContent}</h2>`;  
  document.getElementById('print-area').prepend(header);  
  // 延迟打印确保元素渲染完成  
  setTimeout(() => window.print(), 100);  
}  

注意事项与常见问题

1. 跨浏览器兼容性

• IE 浏览器：需注意 @media print 的兼容性，部分旧版 IE 可能不支持 !important。
• 移动端：在手机浏览器中调用 print() 时，需确保页面缩放比例合适，避免内容溢出。

2. 打印预览与调试

开发者可通过以下方式简化调试流程：

• 开发者工具模拟打印：在 Chrome DevTools 的“覆盖”选项卡中选择“打印预览”，无需实际弹出对话框即可查看效果。
• 动态生成临时页面：若需打印复杂内容，可创建隐藏的 <iframe>，在其中渲染目标内容后再调用 print()。

3. 用户体验优化

• 按钮文案明确：使用“打印订单详情”而非模糊的“打印”按钮，减少用户困惑。
• 错误处理：在调用 print() 前检查打印机连接状态（需依赖浏览器 API 或第三方库）。

进阶技巧：与现代 Web 技术结合

结合 Web Components

通过自定义元素封装打印逻辑，提升复用性：

class PrintButton extends HTMLElement {  
  connectedCallback() {  
    this.innerHTML = '<button>打印</button>';  
    this.querySelector('button').addEventListener('click', () => window.print());  
  }  
}  
customElements.define('print-button', PrintButton);  

使用时只需：

<print-button></print-button>  

与 React/Vue 结合

在前端框架中，可通过事件绑定直接调用：
React 示例：

function PrintButton() {  
  return <button onClick={() => window.print()}>打印</button>;  
}  

结合服务端生成 PDF

对于复杂需求（如加密或品牌化模板），可结合服务端技术（如 Puppeteer、DOM-to-PDF）生成 PDF 文件，再提供下载链接。

结论

Window print() 方法作为浏览器提供的基础能力，为开发者提供了直接控制打印流程的便捷方式。通过结合 CSS 媒体查询、动态 DOM 操作以及现代框架的最佳实践，开发者可以实现从简单页面到复杂报表的多样化打印需求。

无论是优化用户体验、提升功能完整性，还是为业务场景提供纸质化支持，掌握 Window print() 方法 的核心逻辑与高级技巧，将帮助开发者在实际项目中快速落地高效、可靠的解决方案。

（全文约 1800 字，覆盖基础概念、案例实现、进阶技巧及常见问题，确保读者能够循序渐进地掌握该主题。）