Angular长文档分页问题：嵌套OL元素页面溢出处理

针对嵌套OL（含grid-2布局）、表格类长文档的分页溢出、样式丢失问题，直接拆分<li>或单页容器的思路行不通，得换按完整容器块分页+预测量高度的方案，具体实现如下：

核心思路 #

1. 不拆分带样式的容器（比如带grid-2类的<ol>、完整表格），把这些元素作为不可拆分的分页单元
2. 预计算每个单元的高度，按页面容纳量分组，避免溢出
3. 每页固定渲染页脚，复用formId和rightsText参数

具体实现步骤 #

1. 给可分页单元打标记 #

在长文档的顶级可拆分元素上添加统一类名，比如page-break-unit：

<!-- 带grid布局的OL作为完整单元 -->
<ol class="grid-2 page-break-unit">
  <li>...</li>
  <li>...</li>
</ol>

<!-- 普通块级OL作为完整单元 -->
<ol class="block-style page-break-unit">
  <li>...</li>
  <li>
    <!-- 嵌套OL无需打标记，随父单元一起计算高度 -->
    <ol>...</ol>
  </li>
</ol>

<!-- 表格作为完整单元 -->
<table class="page-break-unit">...</table>

2. Angular组件逻辑实现 #

通过ViewChildren获取所有分页单元，计算每页可容纳的单元集合：

import { Component, Input, ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'document-paginator',
  templateUrl: './document-paginator.component.html',
  styleUrls: ['./document-paginator.component.scss']
})
export class DocumentPaginatorComponent implements AfterViewInit {
  @Input() formId: string;
  @Input() rightsText: string;
  @Input() documentContent: string; // 长文档HTML内容，需用[innerHTML]渲染后测量

  @ViewChildren('pageBreakUnit') pageBreakUnits!: QueryList<ElementRef>;
  pages: ElementRef[][] = [];
  pageHeight = 842; // A4高度，可自定义（单位：px）
  footerHeight = 40; // 预定义页脚高度

  ngAfterViewInit(): void {
    this.calculatePages();
  }

  calculatePages(): void {
    const units = this.pageBreakUnits.toArray();
    let currentPage: ElementRef[] = [];
    let currentHeight = 0;

    for (const unit of units) {
      const unitHeight = unit.nativeElement.offsetHeight;
      // 判断加入当前单元后是否超过页面可用高度（总高度-页脚高度）
      if (currentHeight + unitHeight > this.pageHeight - this.footerHeight) {
        this.pages.push(currentPage);
        currentPage = [unit];
        currentHeight = unitHeight;
      } else {
        currentPage.push(unit);
        currentHeight += unitHeight;
      }
    }
    // 加入最后一页剩余内容
    if (currentPage.length > 0) {
      this.pages.push(currentPage);
    }
  }
}

3. 模板渲染分页内容 #

每页用独立容器包裹，确保页脚固定在页底，同时保留原样式：

<div class="page-container" *ngFor="let page of pages">
  <div class="page-content">
    <!-- 渲染当前页的所有单元 -->
    <ng-container *ngFor="let unit of page">
      <div [innerHTML]="unit.nativeElement.outerHTML"></div>
    </ng-container>
  </div>
  <!-- 统一页脚 -->
  <div class="page-footer">
    <p>Form ID: {{ formId }}</p>
    <p>{{ rightsText }}</p>
  </div>
</div>

4. 关键样式配置 #

确保页面容器无溢出，同时保留原OL的grid布局：

.page-container {
  width: 595px; // A4宽度
  height: 842px;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px; // 页间距
  padding-bottom: 40px; // 给页脚留空间
}

.page-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  padding: 0 20px;
  border-top: 1px solid #ccc;
}

// 保留原grid布局样式
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

注意事项 #

• 若文档内容异步加载，需在内容渲染完成后调用calculatePages()
• 存在动态高度元素（如图片）时，需等待资源加载完成后再测量高度
• 可通过@Input传入自定义页面、页脚尺寸，适配不同需求

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