必须用 @page { size: landscape/portrait; } 强制纸张方向，transform 或 width/height 交换无效；chrome/edge 需提醒用户手动设置打印对话框方向；firefox 支持最准，safari/ios 支持弱；表格需配合 table-layout: fixed 和列宽控制防截断。
打印样式里用 @page 设置横向还是纵向
浏览器默认按纸张原始方向打印，想强制横向或纵向，必须在 @page 规则里指定 size。只写 CSS 选择器（比如 .print-area）是没用的——@page 是唯一能控制物理纸张方向的机制。
常见错误是把 transform: rotate(90deg) 或 width/height 交换当成“横向”，这只会让内容被裁剪或缩放，打印机实际输出仍是纵向。
-
@page { size: landscape; }强制横向（等价于size: 11in 8.5in） -
@page { size: portrait; }强制纵向（等价于size: 8.5in 11in） - 如果要适配 A4，写成
@page { size: A4 landscape; }更稳妥 - 多个页面需不同方向？目前主流浏览器不支持单页单独设
@page :first方向，得靠分页 + 隐藏内容模拟
Chrome 和 Edge 打印预览里 direction 不生效的坑
即使写了正确的 @page { size: landscape; }，Chrome/Edge 有时仍显示纵向预览——这不是代码错，而是浏览器把「页面尺寸」和「打印设置」做了双重校验。用户手动点打印对话框里的「横向」开关，会覆盖 CSS 设置。
解决思路不是禁用用户选项，而是提前干预：在触发 window.print() 前，用媒体查询检测是否在打印上下文，并给出提示。
- 加一段 JS 检查：
if (window.matchMedia && window.matchMedia('print').matches) { /* 提示用户检查打印设置 */ } - 不要依赖
@media print里的transform或writing-mode改方向，它们不影响纸张物理朝向 - Firefox 对
@page size支持最准；Safari 仅部分支持，iOS 上基本忽略
表格内容横向打印时列被截断怎么办
横向只是转了纸张，但表格本身宽度没变。如果表格列太多、字体太小，依然会被砍掉。得配合布局调整，否则横向也白搭。
- 给表格加
table { table-layout: fixed; width: 100%; }，再给每列设width百分比 - 用
@media print { body { font-size: 10pt; } }缩小字号，避免换行撑高 - 隐藏非关键列：
@media print .hidden-print { display: none !important; } - 绝对不要用
white-space: nowrap强行不换行——它会让内容溢出纸张右侧，打印机直接切掉
横向纵向本质是纸张尺寸声明，不是视觉旋转。最容易被忽略的是：你写的 @page 可能被用户打印对话框里的设置覆盖，而这个覆盖在开发时根本看不到——只有真连上打印机点「打印」才会暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
