Как взломать страницу, если div нет в области страницы?

#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. Но все равно спасибо, что попытались помочь.