首页 > 文章 > 前端

HTML中使用window.print调用打印功能非常简单，只需在JavaScript中调用window.print()方法即可。以下是详细说明和示例：一、基本用法打印测试页面

这是

时间：2026-05-22 08:27:32 240浏览收藏

推广推荐

支持 PC / 移动端，安全直达

本文深入解析了HTML中`window.print()`打印功能的使用要点与常见陷阱：它虽调用简单（如按钮点击触发），但本质是不可定制的系统级开关，仅在用户交互中有效，无法控制页眉页脚、纸张方向或打印样式；需依赖`@media print`精准隐藏非必要元素（推荐`display: none !important`而非`visibility`或`opacity`）；在单页应用中务必确保DOM完全渲染后再调用，否则易打印出空白或旧状态；而移动端（iOS/Android浏览器）则原生不支持，需降级处理。掌握“何时调”和“DOM是否就绪”这两个关键点，远比理解API本身更重要。

HTML中如何使用window.print调起打印功能

调用 `window.print()` 会直接弹出系统打印对话框

它不接受参数，也不返回值，执行后浏览器立即暂停当前页面渲染、拉起原生打印预览界面。这不是一个可定制的 API，只是触发系统级打印流程的开关。

在任何用户交互事件（如 click）中调用才有效；Chrome 和 Edge 等现代浏览器禁止自动触发（比如在 setTimeout 或页面加载完成时直接调用），否则静默失败
不要指望它能控制页眉页脚、边距或纸张方向——这些全由用户在打印对话框里手动选，JS 无法干预
如果页面含 iframe，window.print() 默认只打印当前窗口/iframe 的内容；需主动切换 window.focus() 到目标 iframe 再调用

打印前建议用 `@media print` 隐藏干扰元素

用户看到的打印预览，是当前 DOM 的快照。导航栏、按钮、广告位、背景图等在纸上既无用又浪费墨水，必须提前隐藏。

给不需要打印的区域加 class，例如 class="no-print"，再写样式：
```
@media print { .no-print { display: none !important; } }
```
避免用 visibility: hidden 或 opacity: 0，它们不阻止元素占位，可能造成空白页或错位
慎用 background-image：默认情况下，Chrome/Firefox 不打印背景（设置里要手动勾选“背景图形”），所以依赖背景图传达信息的页面，打印时会丢内容

`window.print()` 在单页应用（SPA）中容易漏掉动态内容

React/Vue/Angular 页面切换路由时通常不刷新 DOM，但 window.print() 只抓取当前 DOM 快照。如果打印触发时组件还没完成渲染（比如异步数据未返回、动画未结束），就会打出空内容或旧状态。

确保调用前数据已就绪：Vue 可用 nextTick，React 可在 useEffect 或 setState 的 callback 中延迟调用
避免在 print 前做 heavy reflow（如批量修改 style），可能引发布局抖动，导致截取到中间态
调试时可在控制台手动执行 window.print()，观察是否和预期一致；不一致就说明 DOM 还没稳定

移动端调用 `window.print()` 基本无效

iOS Safari 和 Android Chrome 移动版均不支持 window.print()，调用后无反应，也不会报错。这不是 bug，是平台限制。

检测方式简单粗暴：

if (typeof window.print === 'function' && !/iPhone|iPad|iPod|Android/.test(navigator.userAgent)) { window.print(); }

替代方案有限：生成 PDF（用 jsPDF + html2canvas）或引导用户“长按截图→分享→打印”，但体验割裂
别试图用 matchMedia('print') 检测——它永远返回 false，因为移动浏览器根本不进入打印媒体查询上下文

实际可用的打印逻辑往往卡在「什么时候调」和「DOM 是否已准备好」这两个点上，而不是 API 本身。

好了，本文到此结束，带大家了解了《HTML中使用window.print调用打印功能非常简单，只需在JavaScript中调用window.print()方法即可。以下是详细说明和示例：一、基本用法

打印测试页面

这是一个可以打印的页面

点击下面的按钮来调用打印功能。

在这个例子中，当用户点击“打印页面”按钮时，浏览器会弹出打印对话框，允许用户选择打印机、页码范围等。二、通过链接调用打印功能你也可以通过打印页面或者添加样式使其更像一个按钮：打印页面三、控制打印内容（可选）如果你希望只打印页面的一部分内容，可以使用 CSS 的 @media print 规则来隐藏不需要打印的内容。示例：只打印特定部分

资料下载

编程学习资料下载

精选编程（Golang、Python、Java、C++、JavaScript等）教程、电子书与示例源码，一键打包本地下载学习。

立即下载

HTML中使用window.print调用打印功能非常简单，只需在JavaScript中调用window.print()方法即可。以下是详细说明和示例：一、基本用法 打印测试页面

这是

调用 window.print() 会直接弹出系统打印对话框

打印前建议用 @media print 隐藏干扰元素

window.print() 在单页应用（SPA）中容易漏掉动态内容