Разделение одной длинной страницы на несколько страниц

Я работаю над документами, которые могут занимать много страниц с множеством различных переменных форматирования. Большая часть работы выполняется в глубоко вложенных тегах OL и таблицах. Некоторые теги ol используют классы для разделения между сеткой 2 (1fr 1fr), в то время как другие остаются на блочном уровне. Мне нужна логика, которая может разбивать страницы без переполнения, сохраняя указанный нижний колонтитул. Это осуществляется с использованием Angular.

Примечание: HTML обернут в компонент и передает номер ID и текст прав (отказ от ответственности), который используется в качестве постоянного нижнего колонтитула на страницах.

Я попытался использовать логику пагинации на одной странице, чтобы разделить ее на одной и той же странице.

import {
    Component,
    AfterViewInit,
    ElementRef,
    ViewChild,
    Input,
} from "@angular/core";

@Component({
    selector: "app-dynamic-form-page",
    templateUrl: "./dynamic-form-page.component.html",
    styleUrls: [
        "/src/assets/styles/forms.scss",
        "./dynamic-form-page.component.scss",
    ],
})
export class DynamicFormPageComponent implements AfterViewInit {
    @Input() formId: string = "";
    @Input() rightsText: string = ""; // Для нижних колонтитулов
    @ViewChild("fullContent", { static: false }) fullContent: ElementRef;

    constructor() {}
    pages: string[] = []; // Массив для хранения страниц с содержимым
    readonly totalPageHeight = 1056;
    readonly pagePadding = 192;
    readonly pageHeight = this.totalPageHeight - this.pagePadding;

    ngAfterViewInit() {
        this.paginateContent(); // Вызов логики пагинации после инициализации представления
    }

    paginateContent() {
        const contentElement = this.fullContent.nativeElement; // Содержимое для пагинации
        let currentPageContent = ""; // Хранить содержимое для каждой страницы
        let currentHeight = 0; // Отслеживать высоту текущей страницы
        const parentElement = document.createElement("div"); // Смоделированная страница
        parentElement.style.width = "8.5in";
        parentElement.style.height = "11in";
        parentElement.style.position = "absolute"; // Элемент вне экрана
        parentElement.style.visibility = "hidden";
        document.body.appendChild(parentElement); // Добавить вне экрана для расчетов высоты
        let tempContainer = document.createElement("div");
        tempContainer.innerHTML = contentElement.innerHTML; // Загрузить все содержимое во временный контейнер
        while (tempContainer.firstChild) {
            const nextElement = tempContainer.firstChild;
            // Обрабатываем только элементы
            if (nextElement.nodeType === 1) {
                const clonedElement = nextElement.cloneNode(true) as HTMLElement;
                parentElement.appendChild(clonedElement); // Добавить клон для моделирования страницы
                const elementHeight = clonedElement.offsetHeight; // Получить высоту текущего элемента
                console.log(
                    "Текущая сущность:",
                    clonedElement.outerHTML.slice(0, 100),
                    "Высота:",
                    elementHeight,
                );
                // Обработать большие элементы: если элемент слишком велик для страницы, перенести его на следующую страницу
                if (elementHeight > this.pageHeight) {
                    console.log("Обнаружен большой элемент. Перемещение на следующую страницу.");
                    this.pages.push(`${currentPageContent}`); // Добавить содержимое текущей страницы
                    currentPageContent = ""; // Начать заново для следующей страницы
                    parentElement.innerHTML = ""; // Очистить смоделированный контейнер
                    currentHeight = 0; // Сбросить высоту
                    currentPageContent += (nextElement as HTMLElement).outerHTML; // Начать следующую страницу с этого элемента
                    currentHeight = elementHeight; // Установить высоту новой страницы
                    tempContainer.removeChild(nextElement); // Удалить обработанный элемент
                    continue;
                }
                // Если добавление этого элемента превышает высоту страницы, создать новую страницу
                if (currentHeight + elementHeight > this.pageHeight) {
                    this.pages.push(`${currentPageContent}`); // Сохранить содержимое для этой страницы
                    console.log(
                        `Страница ${this.pages.length + 1} создана. Длина содержимого: ${
                            currentPageContent.length
                        }`,
                    );
                    currentPageContent = ""; // Начать заново для следующей страницы
                    parentElement.innerHTML = ""; // Очистить контейнер смоделированной страницы
                    currentHeight = 0; // Сбросить высоту для новой страницы
                }
                // Аккумулировать outerHTML текущего элемента в содержание страницы
                currentPageContent += (nextElement as HTMLElement).outerHTML;
                currentHeight += elementHeight; // Обновить текущую высоту
            }
            // Удалить обработанный элемент из tempContainer
            tempContainer.removeChild(nextElement); // Очистить оригинальное содержимое
        }
        // Убедиться, что последняя страница добавлена, даже если это не полноценная страница
        if (currentPageContent.trim().length > 0) {
            this.pages.push(`${currentPageContent}`); // Добавить последнюю страницу
            console.log(`Последняя страница создана. Всего страниц: ${this.pages.length}`);
        }
        // Удалить смоделированный элемент из DOM
        document.body.removeChild(parentElement);
        // Добавить нижние колонтитулы ко всем страницам
        const totalPages = this.pages.length;
        this.pages = this.pages.map((pageContent, index) =>
            this.addFooter(pageContent, index, totalPages),
        );
    }

    addFooter(content: string, pageIndex: number, totalPages: number): string {
        return `
      

        ${content}
        

          

            

              
${this.formId}
              
${this.rightsText}
              
Страница ${
                                pageIndex + 1
                            } из ${totalPages}
            
          
        
      
    `;
    }
}

Проблема с этим, хотя стилизация для двойного списка остается нетронутой, заключается в том, что вложенные элементы ol вытекают за пределы страницы. Я пытался разделить вложенные элементы ol>li на отдельные элементы, но это убрало необходимую стилизацию и все еще создало некоторое переполнение на страницах.