Javascript如何实现页面打印_如何控制打印样式？
window.print()触发打印并配合@media print样式控制输出效果，需隐藏无关元素、强制分页、适配黑白打印、启用背景色打印，调试推荐PDF预览与媒体模拟。
拟。JavaScript 实现页面打印，核心是调用 window.print()，但真正控制“打出来长什么样”，靠的是 CSS 的 @media print 规则。不写专门的打印样式，浏览器会按屏幕样式直接输出，常出现页眉页脚混乱、内容被截断、无关元素（如按钮、广告）也被印出等问题。
用 window.print() 触发打印
这是最基础的一步，只需一行代码：
window.print();
它会打开系统打印对话框（含预览），用户确认后执行打印。注意：该方法必须由用户手势（如点击）触发，不能在页面加载或异步回调中自动调用，否则现代浏览器会静默拦截。
用 @media print 定义打印专属样式
在 CSS 中写针对打印设备的规则，只在打印时生效，不影响屏幕显示：
- 隐藏不需要打印的元素：
@media print { .no-print, .header-nav, #ad-banner { display: none !important; } } - 强制分页（避免表格/卡片跨页断裂）：
@media print { .invoice-item { page-break-inside: avoid; } }
（也可用break-inside: avoid，后者是新标准，兼容性稍差） - 调整字体大小和颜色以适配黑白打印机：
@media print { body { font-size: 12pt; color: #000; } a { color: #000; text-decoration: none; } } - 确保背景色和图片可打印（默认多数浏览器禁用）：
@media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
这行能强制打印背景色和图片（需配合background: #fff或background-image显式设置）
打印前临时修改 DOM（进阶控制）
若需更灵活控制（比如只打印某个区域、动态加水印），可在调用 print() 前操作 DOM：
- 仅打印指定容器：
先document.body.innerHTML = document.getElementById('print-section').innerHTML;，再print()；但注意会丢失样式和脚本——更稳妥做法是用一个隐藏的注入内容和样式，再对 iframe 调用print() - 添加打印时间/页码等动态信息：
在@media print中用伪元素 +content配合counter()实现页码；时间戳建议在打印前用 JS 插入到 DOM 中（如打印时间：2025-06-15），并在@media print中设为可见
调试打印效果的小技巧
Chrome / Edge 支持“另存为 PDF”作为打印输出，这是最方便的调试方式：
- 打开开发者工具 → 切换到「Rendering」面板 → 勾选 “Emulate CSS media type” → 选择 “print” → 页面即刻呈现打印样式预览
- Ctrl+P（Cmd+P）打开打印预览，勾选“保存为 PDF”，反复生成查看分页、留白、字体是否正常
- 避免使用 Flex/Grid 复杂布局做打印主体——部分老打印机驱动对它们支持不佳，优先用块级流式布局 + 显式宽高
