#javascript #html #css #printing
Вопрос:
Я пробую много разных комбинаций, но не смог найти ничего о динамическом взломе страниц для «создать функцию» пожалуйста, может ли кто-нибудь мне помочь?
на динамической странице я хочу взломать страницу после, если div не может быть заполнен в области страницы…
это мой пример кода, и, как вы видите, все разделы наполовину на одной странице, другая часть на другой странице:
Каково лучшее решение для этого:
i=1;
while (i<30)
{
var profiller = document.createElement("div");
profiller.className = "pageabdc";
profiller.style.border = "solid";
profiller.innerHTML='<div id="" class="card-header " >'
'<div class="">'
'<div class="card">'
'<img src="https://static.remove.bg/remove-bg-web/c6b6518fd8a02cd615005a78a915ad3256dd572d/assets/start_remove-c851bdf8d3127a24e2d137a55b1b427378cd17385b01aec6e59d5d4b5f39d2ec.png" width="200px" class="card-img-top" alt="...">'
'<div class="card-body">'
'<h5 class="card-title">Card title</h5>'
'<p class = "card-text">Some quick example text t o bui ld on the card title and make up the bulk of the card cont .</p<p class="card-text">Some quick example t o build on the card title a nd make up the bulk of the card content.<p class="card-text ">Some quick example text t o build on the card title and make up t he bulk ossssssss dvdvf dddddddd dddddddddd dddddddddddd f the card content.</p><p class="card-text">Some quic k ple text to b uild on t e card tit le and make u p the bulk of the card content.</p><p c ss="card-text ome quick example text to build on the card title and make up the bulk of the card content.</p></p>>'
'<a href="#" class="btn btn-primary">Go somewhere</a>'
'</div>'
'</div>'
'</div>';
document.getElementById("printareaa").appendChild(profiller);
i=i 1;
}
function printarea() {
var printContents =
"<style>"
"@page {size: A4; margin: 2.5em;}"
"@media print {html, body, body * {-webkit-print-color-adjust: exact;color-adjust:" "exact;visibility:"
"hidden;}"
".pageabdc * {page-break-inside: avoid;visibility: visible;}"
".pageabdc {margin: 0;padding: 0;border-style: dotted;box-shadow: none;position: flex;left: 0;top: 0;}"
"@page {size: A4;margin: 0;}"
"</style>"
document.getElementById("printareaa").innerHTML;
profiller.style.border = "solid";
document.body.innerHTML = printContents ;
window.print();
location.reload();
}
.grid-container-a {
display: grid;
grid-template-columns: 50% 50%;
padding: 10px;
grid-gap: 15px 15px;
}
.grid-item-a {
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
text-align: center;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<button class="btn sticky btn-success w-100 btn-sm" onclick="printarea()">YAZDIR</button>
<div id="printareab" class="">
<div class="grid-container-a " id="printareaa"></div>
</div>
Комментарии:
1. все еще жду какого-либо ответа.. Я не смог найти ни одного 🙁
2. В чем именно заключается ваша проблема ? Я не понимаю, почему вы не смогли этого сделать
3. Я сделал это.. это правильная версия того, что вы видите=)
4. Но все равно спасибо, что попытались помочь.