如何用CSS实现单页多尺寸打印？多页横竖方向混合打印可行吗？

嘿，这两个打印相关的需求完全可以用CSS实现！作为经常处理这类需求的开发者，我给你一步步拆解：

这里默认你说的是在同一份打印任务里，不同内容区块使用不同的纸张尺寸（如果是指同一打印页内的元素尺寸不同，那就是普通的CSS布局，直接给元素设置width/height即可）。

核心思路是用CSS的@page规则定义不同尺寸的打印页面，再通过分页符把内容拆分到不同页面，最后把内容区块和对应的页面规则绑定。

举个例子：假设你有两块内容，一块需要用A4纸张，另一块用A3，代码可以这么写：

<!-- HTML结构 -->
<div class="content a4-content">这部分用A4尺寸打印</div>
<div class="content a3-content">这部分用A3尺寸打印</div>

/* 打印专属样式 */
@media print {
  /* 给第二个内容块强制分页，确保它单独占一页 */
  .a3-content {
    page-break-before: always;
  }

  /* 定义A4尺寸的页面 */
  @page a4-page {
    size: A4;
    margin: 1.5cm;
  }

  /* 定义A3尺寸的页面 */
  @page a3-page {
    size: A3;
    margin: 1cm;
  }

  /* 把内容和对应的页面规则绑定 */
  .a4-content {
    page: a4-page;
  }
  .a3-content {
    page: a3-page;
  }
}

当然可以！而且完全能实现你说的「前两部分纵向，其余横向」的需求，同样靠@page和分页符来实现。

直接上完整的示例代码，你可以直接复用：

<!-- HTML结构 -->
<div class="print-section portrait">第一部分（纵向）</div>
<div class="print-section portrait">第二部分（纵向）</div>
<div class="print-section landscape">第三部分（横向）</div>
<div class="print-section landscape">第四部分（横向）</div>

@media print {
  /* 给每个section（除了第一个）添加前置分页符，确保每个section单独一页 */
  .print-section:not(:first-child) {
    page-break-before: always;
  }

  /* 定义纵向页面规则 */
  @page portrait-page {
    size: A4 portrait; /* 这里可以替换成你需要的纸张类型，比如letter portrait */
    margin: 1cm;
  }

  /* 定义横向页面规则 */
  @page landscape-page {
    size: A4 landscape;
    margin: 1cm;
  }

  /* 绑定纵向内容到纵向页面 */
  .portrait {
    page: portrait-page;
  }

  /* 绑定横向内容到横向页面 */
  .landscape {
    page: landscape-page;
  }

  /* 可选：隐藏不需要打印的元素 */
  .no-print {
    display: none;
  }
}

注意事项 #

• 主流浏览器（Chrome、Firefox、Edge）都支持这些打印CSS特性，但建议你实际测试下，个别浏览器可能在边距或分页细节上有细微差异；
• 如果内容过长会自动分页，page-break-before: always是强制在元素前分页，确保每个区块单独占一页；
• 纸张尺寸可以换成你需要的，比如letter、legal等，只要打印机支持就行。

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