如何通过CSS @Media Query实现部分内容横向、部分纵向打印？

1. 修改CSS打印样式，定义双页面规则 #

扩展你现有的@media print规则，新增命名的纵向页面规则，同时给需要切换格式的容器添加分页控制样式：

@media print {
  /* 默认A4横向页面 */
  @page {
    counter-increment: page 1;
    margin: 0.5cm;
    size: A4 landscape;

    @bottom-left {
      content: counter(page) " / " counter(pages);
    }
  }

  /* 命名为portrait的A4纵向页面 */
  @page portrait {
    counter-increment: page 1;
    margin: 0.5cm;
    size: A4 portrait;

    @bottom-left {
      content: counter(page) " / " counter(pages);
    }
  }

  /* 标记需要纵向打印的容器 */
  .print-portrait {
    /* 指定使用portrait页面规则 */
    page: portrait;
    /* 强制在当前容器前分页，确保单独起一页 */
    break-before: page;
    /* 强制在当前容器后分页，后续内容回到横向格式 */
    break-after: page;
  }

  /* 优化纵向表格的打印表现 */
  .print-portrait table {
    width: 100%;
    /* 避免表格被分页截断 */
    page-break-inside: avoid;
  }
}

2. 在React组件中标记需要纵向打印的表格 #

给需要纵向打印的表格外层容器添加print-portrait类，确保该表格所在页面单独使用纵向格式：

// 普通横向表格
<div className="report-table-wrapper">
  <h3>横向数据报表</h3>
  <table>
    {/* 表格内容 */}
  </table>
</div>

// 需要纵向打印的表格
<div className="report-table-wrapper print-portrait">
  <h3>纵向数据报表</h3>
  <table>
    {/* 表格内容 */}
  </table>
</div>

3. 关键注意事项 #

• break-before: page和break-after: page是核心：确保纵向表格单独占一页，不会和前后的横向内容混在同一页。
• page-break-inside: avoid可避免长表格被分页截断，提升打印可读性。
• 直接用浏览器打印预览（Ctrl+P）查看效果，Chrome、Firefox、Edge均支持该规则。

内容的提问来源于stack exchange，提问作者Reacting