如何从HTML文档生成含纵向/横向混合方向的多页PDF？

要让每个section对应指定方向的独立A4页面，核心是利用CSS的@page规则结合分页属性来控制，以下是具体实现步骤：

1. 基础CSS设置：强制每个section分页 #

给所有section添加分页规则，确保每个section单独占一页：

section {
  page-break-after: always; /* 每个section结束后强制分页 */
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  padding: 1cm; /* 可根据需求调整，和页面边距配合避免内容溢出 */
}

/* 最后一个section不需要额外分页，可选优化 */
section:last-child {
  page-break-after: avoid;
}

2. 定义纵向/横向页面规则 #

通过@page分别定义A4纵向和横向的页面尺寸与边距：

@page portrait {
  size: A4 portrait;
  margin: 1cm; /* 页面边距，和section的padding保持一致或配合调整 */
}

@page landscape {
  size: A4 landscape;
  margin: 1cm;
}

3. 给section指定对应页面方向 #

为不同方向的section分配对应的page规则：

section.portrait {
  page: portrait;
}

section.landscape {
  page: landscape;
}

4. HTML结构示例 #

<section class="portrait">
  <h1>纵向页面内容</h1>
  <p>这是一张A4纵向的独立页面</p>
</section>
<section class="landscape">
  <h1>横向页面内容</h1>
  <p>这是一张A4横向的独立页面</p>
</section>
<section class="portrait">
  <h1>另一张纵向页面</h1>
  <p>继续保持纵向布局</p>
</section>

Chrome导出PDF注意事项 #

• 导出时，在Chrome的打印设置中，将布局的纸张尺寸设置为「自定义」，不要强制选择A4，让CSS的@page规则生效。
• 确保section内的内容不会超出页面范围：比如图片设置max-width: 100%，长文本自动换行，避免内容撑开页面导致尺寸异常。
• 如果使用了绝对定位元素，要确保其位置在当前section的页面范围内，否则可能跨页或导致页面尺寸错误。

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