打印纸张尺寸不生效，主因是css中@media print与@page规则使用错误：@page必须嵌套在@media print内并显式声明size（如a4），不可写为210mm 297mm；同时需确保打印机驱动设置与css一致。
打印时纸张尺寸不生效，多半是CSS媒体查询没写对
浏览器默认按屏幕渲染，@media print 必须显式声明，且不能被其他样式覆盖。常见错误是把 @page 规则写在普通样式块里，或漏掉 size 属性。
正确写法要分两层：先用 @media print 控制内容样式，再在其中嵌套 @page 设置物理纸张尺寸：
@media print {
@page {
size: A4 portrait; /* 或 A5 landscape */
margin: 0.5cm;
}
body {
margin: 0;
font-size: 12px;
}
}
-
size值必须是标准关键词（A4、A5、letter），不能写成210mm 297mm—— 多数浏览器会忽略 - Chrome 和 Edge 支持
size: A4 landscape，但 Firefox 对landscape的支持不稳定，建议用size: A4; transform: rotate(90deg)配合内容调整 - 如果页面含绝对定位元素，
@page margin可能被忽略，此时需额外给body加margin
HTML里用window.print()触发后A4空白或截断
根本原因不是JS，而是内容高度超出单页可用区域。浏览器不会自动分页，也不会缩放适配——它只按当前CSS计算布局，超长就截断或留白。
- 检查是否设置了
height: 100vh或固定min-height，这些在打印上下文中会失效或撑破页面 - 避免用
position: fixed，打印时这类元素可能消失或重复出现在每页 - 分页控制优先用
page-break-inside: avoid和break-inside: avoid（后者是新标准，兼容性稍差） - 调试技巧：在开发者工具中切换到「Rendering」面板 → 勾选「Emulate CSS media type」→ 选
print，实时看效果
后端生成PDF才靠谱？别急，先确认你真需要它
纯前端打印能解决80%的A4/A5场景，比如发票预览、内部单据、培训材料。只有当出现以下情况时，才该切到服务端PDF生成：
- 用户必须下载可存档的PDF（浏览器打印输出的PDF质量/字体嵌入不可控）
- 内容含复杂图表（Canvas / SVG 在
@media print中渲染异常率高） - 需要精确控制页眉页脚位置（
@page :first浏览器支持极差） - 涉及敏感数据，不允许内容留在客户端（此时连
window.print()都不该触发）
如果只是让「用户点一下就打出一张标准A4」，坚持用CSS + window.print() 更轻量，也更容易调试。
IE和旧版Edge下@page size完全不认，怎么办
IE11及以下、Edge 18及以下版本根本不支持 @page size，这是硬伤，没有CSS绕过方案。唯一可行路径是降级处理：
- 用
document.documentMode或navigator.userAgent检测旧引擎 - 对旧环境隐藏打印按钮，改为提示「请使用Chrome / Firefox / 新版Edge」
- 或者提供一个预设好A4尺寸的iframe（
width="210mm" height="297mm"），用iframe.contentWindow.print()强制触发——虽不能保证100%精准，但比无限制拉伸强 - 切记：不要尝试用JS动态改
body.style.width去模拟A4，这只会让内容错位，且无法影响实际出纸尺寸
真正容易被忽略的是打印机本身的设置：即使CSS写了size: A4，如果用户打印机驱动里默认选了Letter或自定义尺寸，浏览器仍会按驱动设置裁剪。所以最终纸张大小是CSS + 打印机驱动共同决定的，前端只能管前者。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
