Текст в разных блоках

Рейтинг: 0Ответов: 0Опубликовано: 29.05.2023

Реально ли сделать такое: блоки (на подобие предварительного просмотра страниц перед печатью в ворде), которые скриптом наполняются текстом. После вставки строки проверяется высота блока, в определенную высоту создаётся новый блок (подобие страницы) и в него продолжается вставляться текст дальше. Текст форматированный, с HTML-тегами. В этом и сложность, т.к. вложенность тегов присутствует.

Встречается короткий текст: дата, название города, номер.. Это не сложно. А бывает большой абзац с внутренним форматированием и вот его на строки разбить сложно. Вставляю insertAdjacentHTML и если в строке тег не закрыт (закрывается в другой строке), то браузер его закрывает сам и форматирование слетает.

Чувствую, что что-то делаю не так изначально. Не могу понять с чего начать...

Уже форматированное содержимое документа по шаблону генерируется в PHP и выводится в тег <div id='div_OrderBuffer'></div>.

Заранее создан блок-контейнер для страниц: <div id='desktop' class='desktop'></div>.

Далее скрипт создаёт в блоке-контейнере блок-страницу<div id='currentpage' class='page'></div>.

Потом берёт построчно из блока div_OrderBuffer и вставляет в блок-контейнер. Попутно проверяя высоту блока currentpage.

<div id='div_OrderBuffer'>
    <header>
        <p class='bold'>МИНИСТЕРСТВО РОССИЙСКОЙ ФЕДЕРАЦИИ</p>
        <p>федеральное государственное бюджетное образовательное учреждение высшего образования</p>
        <p class='bold'>«ГОСУДАРСТВЕННЫЙ ИНСТИТУТ»</p>
        <br>
        <p class='bold'>ПРИКАЗ</p>
    </header>
    <div class='div_table'>
        <div class='div_td left'>29 «мая» 2023 г.</div>
        <div class='div_td center'>Барнаул</div>
        <div class='div_td right'>№ 666-с</div>
    </div>
    <p class='center' style='margin-bottom: 0;'><strong>О выходе из академического отпуска<br>Об отчислении</strong></p><main><br><strong class='uppercase'>П р и к а з ы в а ю :</strong><p>1. СЧИТАТЬ <strong>с 01.04.2023 г.</strong> вышедшим из академического отпуска по семейным обстоятельствам <strong class='uppercase'>Петрова Петра Петровича</strong>, студента третьего курса группы АД-13,  ляляляля, обучающегося <strong>на бюджетной основе</strong> и разрешить приступить к занятиям в группе АД-14.</p><p>2. ОТЧИСЛИТЬ по собственному желанию <strong>с 01.04.2023 г.</strong> <strong class='uppercase'>Петрова Петра Петровича</strong>, студента третьего курса группы АД-14 заочной формы обучения ляляля, квалификация «Бакалавр».</p><p>3. Контроль за исполнением приказа возложить на декана  факультета </p><br>Основание:<br>Личное заявление студента.</main>
    <br><br>
    <div class='div_table'>
        <div class='div_td left'>И.о. ректора</div>
        <div class='div_td right'>И. И. Иванов</div>
    </div>
</div>

<div id='desktop' class='desktop'></div>
function InsertLines(){
    page=document.createElement('div');
    page.className="page";
    page.id="currentpage";

    document.getElementById("desktop").append(page);

    currentPage=document.getElementById("currentpage");
    
    bufferFrame=document.getElementById("div_OrderBuffer").innerHTML;
    bufferArray=bufferFrame.split("\n\n");
    bufferArray.forEach(element=>{
        inPage.insertAdjacentHTML("beforeEnd",element);
        if(document.getElementById("currentpage").clientHeight>=800){
            console.log(`Пора создавать новую страницу, но если абзац большой, то он перенесётся весь и будет выглядеть ооочень не красиво`);
        }
    });
    currentPage.id="";
}

Ответы

Ответов пока нет.