使用 @page { size: A4; margin: 1.5cm; } 可靠锁定A4纸张尺寸与边距，必须平级书写、大小写敏感，且仅支持尺寸/方向/页边距属性。
怎么用 @page 控制 A4 尺寸和边距
浏览器默认不保证输出为 A4，尤其在跨设备或旧版 Edge 中，@page 是唯一能可靠锁定纸张物理尺寸的机制。不加它，window.print() 可能按屏幕尺寸切页，导致内容被截断或缩放失真。
必须显式声明：
@page {
size: A4;
margin: 1.5cm;
}
@media print {
body {
margin: 0;
padding: 0;
}
}注意两点：一是 size 值区分大小写（A4 有效，a4 无效）；二是 @page 不能嵌套在 @media print 内，必须平级书写。
常见错误：
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
-
@page { size: 210mm 297mm; }虽然等效，但部分旧版 Safari 不识别，优先用A4 - 在
@page里写font-size或color—— 这些属性无效，只接受尺寸、方向、页边距相关声明 - 给
html或body设height: 100vh—— 打印时会强制单页撑满，内容溢出反而多出空白页
表格和图片为什么总被劈开？怎么防跨页断裂
表格和图片是打印中最容易“断层”的元素，本质是浏览器分页算法默认允许块级元素跨页拆分。仅靠 page-break-inside: avoid 不够，需组合干预。
对 <table> 必须同时设置：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li><code>table { page-break-inside: avoid !important; width: 100% !important; border-collapse: collapse; }
thead { display: table-header-group; }（确保每页都显示表头）tr { page-break-inside: avoid; }（防单行被切开，IE 不支持，需 fallback）对图片，禁用 float 和 max-width: 100vw（vw 在打印上下文不可靠），改用：
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}若图片仍溢出，检查父容器是否含 padding 或 border，它们会计入宽度并导致超限。
怎么精准控制“只打这部分”，而不是整个页面
直接调用 window.print() 会把 DOM 全量送进打印流，包括导航栏、按钮、弹窗遮罩——哪怕它们 CSS 是 display: none，某些浏览器仍可能渲染。
真正可控的做法是内容隔离：
- 用
data-print="true"显式标记可打印区域，例如：<div data-print="true"><h2>订单详情</h2></div> - 打印前 JS 清理 DOM：
const printArea = document.querySelector('[data-print="true"]'); document.body.innerHTML = printArea.outerHTML; - 再执行
window.print()，避免样式污染和布局干扰
别依赖 .no-print 类：Ant Design、Bootstrap 等框架自带同名类，CSS 优先级混乱时会失效；也别用 visibility: hidden 或 opacity: 0，它们不移除布局占位，仍可能被打印引擎解析。
为什么 Chrome 打印预览看着正常，实际 PDF 却错位
Chrome 的“另存为 PDF”和物理打印机走的是不同渲染路径：前者由 Blink 引擎生成 PDF 流，后者经操作系统打印子系统转译。同一份 HTML，在 PDF 导出时可能忽略某些 @media print 规则，尤其是涉及 flex、grid 或 position: sticky 的布局。
关键规避点：
- 打印区域禁用
display: flex/display: grid—— 改用display: block+margin控制间距 - 所有文字字号统一用
pt（如12pt），不用px或rem，因 DPI 解析差异会导致缩放漂移 - 调试时打开 Chrome DevTools → ⚙️ Settings → Preferences → Rendering → Emulate CSS media:
print，比反复 Ctrl+P 更快定位样式失效点
最易被忽略的是字体回退：中文字体若未声明 font-family: "SimSun", "Noto Sans CJK SC", sans-serif;，PDF 导出可能用默认无衬线体替代，导致字宽变化、换行错乱。务必显式指定 fallback 链。
