JavaScript 中的 window.print() 方法可以调用浏览器的原生打印功能，实现页面内容的打印。下面是使用方法和一些注意事项：✅ 基本用法window.print();将这段代码放在需要触发打印的地方，比如按钮的点击事件中：打印页面当用户点击按钮时，浏览器会弹出打印对话框，允许用户选择打印机、页码范

JavaScript 的 `window.print()` 是一个简单却强大的原生打印触发工具，只需一行代码即可唤起浏览器标准打印对话框，但真正实现专业、整洁、跨浏览器兼容的打印效果，关键在于结合 `@media print` CSS 精准控制样式（如隐藏导航栏、广告等非必要元素）、优化布局适配 A4 纸张（避免绝对定位、合理设置宽度与分页）、并借助 `onafterprint` 或 iframe 动态方案提升交互体验——掌握这些技巧，你就能让网页内容一键输出为清晰、专业的纸质文档。

直接调用 window.print() 就能触发浏览器原生打印对话框，但要获得干净、可控的打印效果，关键在于配合 CSS 媒体查询和页面结构优化。

基础用法：一行代码触发打印

在任意事件中（比如按钮点击）执行：

javascript
window.print();

这会立即唤起浏览器的打印预览界面（Chrome、Edge、Firefox、Safari 均支持），用户可选择打印机、页边距、是否背景图形等。注意：该操作是同步阻塞的，JavaScript 会暂停执行直到用户关闭打印窗口。

打印前隐藏不需要的内容

导航栏、侧边栏、按钮、广告位等通常不该出现在打印页中。推荐用 CSS 的 @media print 隐藏：

css
@media print {
  .header, .sidebar, .print-hide { display: none !important; }
  body { font-size: 12pt; line-height: 1.4; }
}

给不想打印的元素添加 class="print-hide" 是常见做法。避免仅靠 JS 移除 DOM，因为 window.print() 触发时样式已计算，CSS 控制更可靠、更轻量。

确保关键内容适配打印布局

打印默认使用 A4 尺寸（约 210×297mm），网页常见的流式布局或 Flex/Grid 可能错乱。建议：

• 对打印区域（如文章正文）设置固定宽度（如 max-width: 210mm）并居中
• 避免使用 position: fixed/absolute 定位的元素，它们在分页时易丢失
• 图片添加 max-width: 100%; height: auto; 防止溢出纸张
• 用 page-break-inside: avoid; 防止标题与正文被拆到不同页

补充技巧：打印后自动恢复或提示

由于 window.print() 没有回调函数，无法直接监听“打印完成”。但可通过以下方式增强体验：

• 点击打印按钮后，禁用按钮并显示“正在准备打印…”（文字提示比 loading 图标更兼容）
• 利用 window.onafterprint（Chrome、Edge、Firefox 支持，Safari 不支持）做收尾处理，例如重置按钮状态
• 若需高一致性，可动态生成仅含打印内容的 iframe，调用其 contentWindow.print()，打印完再移除 iframe

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~