How to insert a page break intelligently based on content in HTML for generating PDF

Question

I have a continuous HTML page that can go to any height based on user input. When the user is done with inserting content then I generate PDF of the HTML document. For HTML to PDF conversation I am using wkhtmltopdf.

The whole html is composed of small sections. I want that when A new section is about to start and the control is nearly at the end of the page then that section should begin from next page rather some part of it on page 1 and remaining on page 2.

Here is my relevant code:

HML:

<div id="page-content">
  <div class="section-item></div><!---This is of variable height based on content-->
  <div class="section-item></div><!---This is of variable height based on content-->
  <div class="section-item></div><!---This is of variable height based on content-->
  <div class="section-item></div><!---This is of variable height based on content-->

</div>

JavaScript:

$(window).load(function() {

var pageSize = 1300;
var currrentPageSpace = pageSize;
$(".section-item").each(function() {

    var sectionPosition = $(this).position().top;
    var sectionHeight = $(this).outerHeight(true); //Height, including the padding and margin

    var availabePageSpace = currrentPageSpace - sectionPosition;
    if (sectionHeight < availablePageSpace) {
        $(this).css("margin-top", availabePageSpace+"px"); //Give this section margin top equal to amount of remaining page space so that this section is shown on next page
        currentPageSpace += pageSize; //Now we are on new page and its available space is adjusted
    }
});
});

But this code has random behavior based on page content. For some content it works perfectly. Sometimes it does not add margin at all. Sometimes the section-item goes to next page and has lot of margin added the top.

Is there alternative way of achieving page breaks for continuous HTML while generating PDF? Any help or input will be highly appreciated.

Answer 1

I calculate if the square "quadrado" has height to fit in the html page with 100px height without yes it adds a page break in the last one and sums the current height + base height 100px ex. Current_time_2000px + base_space 1000px = 300px

My idea is to do something like google docs or Word in the page break, but for now it comes out even 1.0 version :P.

I hope I have helped, :)

var count_add_class = 1,
    tamanho_do_elemento = 1,
    count_soma = 0,
    i = 1;

$(".altura_bloco").each(function() {
    var a = count_add_class++;
    // pega a posição do elemento, e adcinando uma classe 1,2,3,4,5,6,7...
    $(this).addClass("element_height_" + a);

    tamanho_do_elemento = $(this).outerHeight();
    count_soma += tamanho_do_elemento;
    // console.log(tamanho_do_elemento);
    console.log(tamanho_do_elemento);

    if (count_soma > 937) {
        $(this).addClass("page-break");
        count_soma = tamanho_do_elemento;
        i++;
        // console.log(tamanho_do_elemento);
    }
});

.altura_bloco {
   width: 400px;
   height: 400px;
   background: #000;
   margin: 10px;
 }
@media print {
  .page-break {
  display: block;
  page-break-before: always;
  }
}

<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco"><br></div>
<div class="altura_bloco" style="height: 500px"><br></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>