Текст в разных блоках
Реально ли сделать такое: блоки (на подобие предварительного просмотра страниц перед печатью в ворде), которые скриптом наполняются текстом. После вставки строки проверяется высота блока, в определенную высоту создаётся новый блок (подобие страницы) и в него продолжается вставляться текст дальше. Текст форматированный, с 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="";
}