Blazor中使用CSS实现发票横向与纵向打印的问题

问题核心 #

在Blazor项目中实现部分发票纵向、部分横向打印时，直接在组件隔离CSS中写@page规则会互相覆盖；使用transform: rotate则会导致多页分页失效。

推荐解决方案：自定义页面类+全局CSS关联 #

步骤1：在全局CSS文件中定义页面方向规则 #

将打印样式写在全局CSS（比如wwwroot/css/site.css）中，通过页面类区分不同打印方向：

@media print {
  /* 纵向打印页面配置 */
  @page .portrait-page {
    size: portrait;
    margin: 1cm; /* 根据需求调整边距 */
  }

  /* 横向打印页面配置 */
  @page .landscape-page {
    size: landscape;
    margin: 1cm;
  }

  /* 将组件根元素与对应页面规则绑定 */
  .invoice-portrait {
    page: portrait-page;
  }

  .invoice-landscape {
    page: landscape-page;
  }
}

步骤2：在Razor组件中指定打印类 #

给需要纵向打印的发票组件根元素添加class="invoice-portrait"：

<div class="invoice-portrait">
  <!-- 纵向发票内容 -->
</div>

给需要横向打印的发票组件根元素添加class="invoice-landscape"：

<div class="invoice-landscape">
  <!-- 横向发票内容 -->
</div>

原理说明 #

@page规则支持通过类名关联到特定元素，不同组件的根元素绑定不同的页面类后，打印时会自动应用对应的页面方向，避免样式覆盖。

备选方案：修复旋转法的分页问题（不推荐） #

如果必须使用旋转实现，需手动处理分页和尺寸适配：

@media print {
  .rotated-invoice-container {
    transform: rotate(90deg);
    transform-origin: top left;
    width: 100vh; /* 转换为横向纸张高度 */
    height: 100vw; /* 转换为横向纸张宽度 */
    margin-top: 100vw; /* 偏移位置避免内容被裁切 */
    page-break-after: always; /* 强制分页 */
  }

  /* 内部元素反向旋转恢复正常显示 */
  .rotated-invoice-container * {
    transform: rotate(-90deg);
    transform-origin: top left;
  }
}

此方法需手动调整尺寸和边距，适配性较差，仅在无法使用@page类时考虑。

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