应使用@media print隐藏非内容元素并设置内容容器宽度，正确调用window.print()，通过CSS强制打印背景色，用遮罩法限定打印区域，并确保字体可回退。
点击按钮触发打印，但页面布局乱了
直接调用 window.print() 确实能唤出浏览器打印对话框，但默认会把所有元素（导航栏、按钮、广告位）一起打出来，排版错乱、浪费纸张。关键不是“能不能打印”，而是“打印什么、怎么排版”。
- 打印前必须用 CSS 媒体查询隐藏非内容区域，比如：
@media print { .no-print, header, footer, .print-btn { display: none; } } -
display: none在打印时生效，但不影响屏幕显示；别用visibility: hidden，它仍占位，可能影响分页 - 确保目标内容容器有明确宽度（如
max-width: 800px），否则长文本在打印预览里可能横向溢出
打印按钮点击后没反应，控制台报错
常见原因是按钮绑定事件时，window.print 被当成变量名或函数未定义——它是个原生方法，不能加括号写成 window.print() 当参数传，也不能漏掉括号调用。
- 错误写法：
<button onclick="window.print">打印</button>
（少括号，不执行） - 正确写法：
<button onclick="window.print()">打印</button>
或更推荐：<button id="print-btn">打印</button><script>document.getElementById('print-btn').addEventListener('click', () => window.print());</script> - 如果页面用了 CSP（内容安全策略），内联
onclick可能被拦截，优先用外部事件监听
打印时背景色、图片不显示
这是浏览器默认行为：为节省墨水，Chrome/Firefox 默认关闭背景图形打印。用户得手动勾选“背景图形”，但不能依赖这个操作。
- 强制启用背景打印需在打印 CSS 中加：
@media print { * { -webkit-print-color-adjust: exact; color-adjust: exact; } } -
-webkit-print-color-adjust是 Chrome/Safari 必须项，color-adjust是标准属性，两者都写更稳妥 - 但注意：某些打印机驱动或 PDF 导出工具仍可能忽略该声明，纯色背景相对可靠，渐变/透明度支持差
想只打印某一块区域，而不是整页
没有原生 API 能指定 DOM 范围打印，只能靠“遮罩法”：临时隐藏其他内容，再调用 window.print()。
立即学习“前端免费学习笔记（深入）”；
- 不要用
iframe或新窗口打开片段再打印——跨域、样式丢失、新窗口易被拦截 - 推荐做法：给要打印的区域加唯一 ID（如
id="print-area"），点击按钮时：const body = document.body;const originalHtml = body.innerHTML;body.innerHTML = document.getElementById('print-area').innerHTML;window.print();body.innerHTML = originalHtml; // 恢复 - 但此法会丢失全局样式和 JS 状态，更健壮的做法是用
getComputedStyle提取关键样式，或提前用@media print控制可见性
实际项目里最常被跳过的，是打印前检查字体是否嵌入或可回退——网页用的 Google Fonts 或自定义 icon font，在离线打印或 PDF 导出时大概率变成方块。真要保效果，得把关键文字转成 SVG 或用系统安全字体兜底。
