必须配合@media print才能真正完成打印优化，因其可隐藏导航栏、适配纸张、修复表格跨页断裂；需单独引入或置于屏幕样式之后，且iframe内需单独定义，表格须加page-break-inside: avoid和thead{display:table-header-group}。
直接调用 window.print() 不会自动适配纸张、隐藏导航栏或修复表格跨页断裂——必须配合 @media print 才算真正完成打印优化。
为什么 @media print 必须写在最终渲染的样式表里
很多人把打印样式塞进一个被 import 进来的 CSS 文件末尾，或者混在屏幕样式中间，结果预览时完全不生效。浏览器对 @media print 的解析优先级依赖于样式来源和加载顺序。
- 最稳妥方式是用
<link rel="stylesheet" media="print" href="print.css">单独引入，避免被其他规则覆盖 - 若内联书写，
@media print块必须放在所有屏幕样式之后，且不能嵌套在其他媒体查询中 - 如果页面含
iframe，父页的@media print不会穿透生效，需在 iframe 内单独定义或提前提取内容 - 旧版 Safari 对
@page规则支持极弱，但@media print本身兼容性极好（IE9+ 全支持）
如何让表格在打印时不被硬生生劈成两半
表格跨页断裂是最影响专业感的问题，尤其带 thead 的长表——浏览器默认不会重复表头，tr 被切开后下半截孤零零挂在第二页开头。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 给
table加page-break-inside: avoid;，防止整表被拆（Chrome/Firefox 支持良好） - 显式声明
thead { display: table-header-group; }，否则跨页时表头消失 - 横向打印长表？加
@page { size: landscape; }，并确保容器max-width: none;，否则会被 A4 纵向宽度截断 - 避免用
flex或grid布局包裹表格，打印时它们常退化为不可预测的流式结构
打印 HTML 代码块时为何标签全丢了
直接把 <div>hello</div> 放进 <div> 或 <code><p></p> 里，浏览器会把它当标签解析，而不是显示成文字。想原样打印出来，必须先转义再包裹。
- 先用 JS 转义关键字符：
→ <code>，<code>>→>，&→& - 外层用
<pre class="brush:php;toolbar:false;"></pre>（保留空白与换行），内层套<code class="html">（语义明确 + 默认等宽） - 打印样式中强制重置：
pre, code { font-size: 10pt; font-family: "SFMono-Regular", Consolas, monospace; margin: 0; padding: 8px; } - 禁用
background-image和阴影，否则部分打印机驱动会跳过整块区域
为什么导出 PDF 比直接打印更可靠
不同浏览器对 @media print 的实现差异很大：Chrome 可能忽略 orphans，Edge 渲染 @page margin 时偏移 2mm，Firefox 对 position: sticky 在打印中行为不一致。
- 在 Chrome 中按
Ctrl + P→ 选择“另存为 PDF”，比调用window.print()更可控 - 生成的 PDF 锁定字体嵌入、固定分页、规避 JS 动态渲染干扰（如 Vue/React 组件未 mount 完就触发打印）
- 中文场景下，PDF 能确保“微软雅黑”“宋体”等系统字体不被 fallback 成方块
- 若必须物理打印，打开 PDF 后选“实际大小”+“居中”，禁用“适应页面”——后者会无损缩放导致字体糊、边距失真
最容易被忽略的是：打印样式不是“写完就跑”，它必须在真实打印预览中逐页检查分页点、边距裁切和字体回退。哪怕只改一行 font-size，也可能让某页多出半行空白或少一格边距。
