正确调用是window.print()，它属于浏览器web api，用于触发打印对话框；需配合@media print控制样式，注意dom就绪、框架异步更新及ssr环境限制。
HTML中没有print方法，正确调用是window.print()
很多人在控制台输入 print() 会报错，或者在HTML里写 print() 完全没反应——因为 print() 不是JavaScript标准API，也不是HTML内置方法。真正能触发浏览器打印对话框的是全局对象 window.print()。
它属于浏览器环境的Web API，所有现代浏览器都支持，但行为有细微差异：
- Chrome 和 Edge：默认弹出系统级打印预览，支持PDF导出
- Safari：弹出较简化的打印面板，对CSS媒体查询支持稍弱
- Firefox：打印前会重新计算页面布局，有时会忽略部分内联样式
直接调用window.print()的常见错误
看似一行代码，实际踩坑不少：
- 在页面尚未加载完成时执行，比如放在
里的<script></script>中——此时DOM未就绪，虽不报错但可能截取到空白页 - 在异步操作（如
fetch或setTimeout）后立即调用，但未等关键内容渲染完毕（React/Vue中尤其明显） - 绑定在按钮上却用了
href="javascript:print()"，既用了错误函数名，又因跳转逻辑干扰打印流程 - 在iframe内调用时，误写成
parent.print()或self.print()，实际应明确指向目标窗口：iframe.contentWindow.print()
让打印更可控：配合CSS @media print
单纯调用 window.print() 只是打开对话框，真正决定“打出来长什么样”的是CSS。必须用 @media print 做针对性隐藏和重排：
@media print {
nav, header, .no-print, .btn-print {
display: none !important;
}
body {
font-size: 12pt;
line-height: 1.4;
}
img {
max-width: 100% !important;
height: auto !important;
}
}
注意几点：
-
!important很必要——打印样式优先级常被页面原有样式覆盖 - 避免使用
background-image，多数浏览器默认关闭背景图形打印（需用户手动勾选“背景图形”） - 不要依赖CSS变量（
var(--color)）做关键颜色控制，部分浏览器在打印时无法解析
React/Vue等框架中调用的特殊处理
框架组件更新是异步的，直接在状态变更后立刻调用 window.print() 往往抓不到新DOM。例如Vue中：
this.showPrintVersion = true
this.$nextTick(() => {
window.print()
})
React中类似：
setShowPrintVersion(true)
useEffect(() => {
if (showPrintVersion) {
window.print()
}
}, [showPrintVersion])
关键点：
- 不能省略
$nextTick（Vue）或useEffect（React），否则打印的是旧快照 - 打印完成后建议自动恢复界面状态，比如隐藏专为打印准备的元素，否则用户返回页面看到异常布局
- 服务端渲染（SSR）场景下，
window对象不存在，必须确保调用只发生在客户端
最易被忽略的是打印触发时机与DOM真实渲染之间的微小延迟——哪怕只差几毫秒，也可能导致内容缺失或样式错乱。测试时别只看“有没有弹窗”，要真打出一张纸或PDF来核对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
