打印带有分页符的html页面

Question

i have data for create table and print it. The structure is like :

Title Data Sum

The title must not be at the end of page and the Sum must not be at the start of page when print it. Thant is why i made html table with Divs and give all size with mm. but i couldnt colculate when break page. couse in different computers height changes.

here is my javascript code for calculate and break page

$(document).ready(function(){
        var mydiv ='<div class="page-break"></div>';
        var i=0;
        var h = px2cm($("#myinfo").last().height())*10;
        var limit=297;
        var g =0;

        $('#content div.ptr').each(function(){
            g=0;
            h = h + px2cm($(this).height())*10;
            var nexth=px2cm($(this).next().height())*10;
            if(h>=limit-nexth)
            {               
                if($(this).hasClass("ptrtitle")){
                    $(this).before(mydiv);
                    h = px2cm($(this).height())*10;
                    i++;
                    g=1;
                }else{                  
                    if(String($(this).next().attr("class"))==="ptr ptrsum"){
                        if($(this).prev().hasClass("ptrtitle"))
                        {
                            $(this).prev().before(mydiv);
                            h = px2cm($(this).height()+$(this).prev().height())*10;
                        }else{
                            $(this).before(mydiv);
                            h = px2cm($(this).height())*10;
                        }
                        //h=0;
                        i++;
                        g=1;
                    }else{
                            $(this).after(mydiv);
                            h=0;i++;
                    }
                }
            }
        });
    });
    function px2cm(px) {
      var d = $("<div/>").css({ position: 'absolute', top : '-1000cm', left : '-1000cm', height : '1000cm', width : '1000cm' }).appendTo('body');
      var px_per_cm = d.height() / 1000;
      d.remove();
      return px / px_per_cm;
    }

here i add limit=297(for A4 height, it works good on some computers, but doesnt work good on others). doesnt work good means that, on the first computer it prints 40 row in one page, but on another some rows go to the next print page

How can i normally print data in all computers

Answer 1

Try adding css2 property page-break for your class page-break with @media print instead of calculating page break manually. Also different scale can be used specific to print if needed.

@media print {
    .page-break {page-break-after: always;}
}