浏览器打印HTML样式错乱需用@media print精确控制，必加print-color-adjust: exact;避免灰度，禁用fixed/absolute布局，图片改用，PDF中文乱码应优先用puppeteer服务端生成。
浏览器直接打印 HTML 页面时样式错乱怎么办
默认打印会丢掉很多 CSS 样式，尤其是 display: flex、background-color、浮动布局和自定义字体。浏览器只保留“适合打印”的基础样式，比如段落间距、字号、链接下划线（但通常不显示颜色）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 加专门的
@media print规则，显式声明哪些元素要显示/隐藏、是否启用背景、用什么字体替代 - 关键属性别省：必须写
-webkit-print-color-adjust: exact;和print-color-adjust: exact;，否则background-color和color一律被强制灰度 - 避免用
position: fixed或absolute布局内容——打印时它们常被截断或消失 - 图片记得加
alt，纯背景图在打印里基本不可见，需要改用<img alt="html格式怎么打印出来_html格式怎么打印为纸质文档或PDF【攻略】" >标签内嵌
window.print() 触发后用户看不到预览就直接出纸？
这是浏览器行为差异导致的：Chrome 默认弹打印预览，Safari 和部分 Edge 版本可能跳过预览直连打印机（尤其企业域环境下启用了静默打印策略）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
window.print()后的 JS 执行时机——它立即返回，不等用户点“打印”或“取消” - 如果需做后续动作（比如记录日志、禁用按钮），得靠监听
beforeprint/afterprint事件，但注意afterprint在用户取消时也触发 - 想确保看到预览？没法强制，但可提示用户按
Ctrl+P（Windows）或Cmd+P（macOS）手动唤起
导出 PDF 时中文乱码或字体缺失
不是编码问题，是 PDF 生成工具没嵌入中文字体。常见于用 jsPDF + html2canvas 这类组合：截图方式绕过了字体渲染链，最终 PDF 里只有系统 fallback 字体（如 Helvetica），不支持中文。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用服务端方案：Node.js 的
puppeteer可完整复现浏览器渲染，加载 WebFont 也没问题，输出 PDF 字体正常 - 若必须前端生成，
jsPDF需手动加载并注册中文字体文件（.ttf），再用addFileToVFS+addFont，且文本得用text()逐行写，不能直接塞 HTML - 别信“自动识别字体”的插件——它们基本只认 ASCII 字体名，对
Microsoft YaHei或Noto Sans CJK SC识别率极低
打印页眉页脚里怎么动态显示标题或页码
浏览器原生打印页眉页脚完全由用户控制（设置里开/关、填内容），网页 JS 无法写入。所谓“动态页码”只能靠 CSS 的 counter-increment + content: counter(page) 实现，但仅限页面内部，不进系统页眉区。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
@page规则 +::before/::after伪元素，在每页顶部/底部插入内容，例如：@page { @top-center { content: "报表 - " counter(page); } } - 页码计数器必须配合
body { counter-reset: page; }和分页元素（如div.page-break { break-after: page; }）才能正确累加 - 页眉区域高度有限（通常 0.5in 左右），内容超长会被裁剪，建议只放简短标题和页码，别塞日期或 URL
实际最麻烦的从来不是“怎么打出来”，而是“怎么让第 3 页的表格不被截成两半”“怎么让带阴影的卡片在 PDF 里依然有层次感”——这些细节没有银弹，得一层层试 @media print、@page、break-inside 的组合效果。
