javascript - 打印带有分页符的 html 页面

Question

我有用于创建表并打印的数据。结构如下:

标题数据总和

打印时标题不能在页尾，总和不能在页首。这就是为什么我用 Divs 制作 html 表格并用 mm 给出所有尺寸。但是当分页时我无法计算。因为在不同的电脑上高度会发生变化。

这是我用于计算和中断页面的 javascript 代码

$(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;
    }

这里我添加了 limit=297(对于 A4 高度，它在某些计算机上运行良好，但在其他计算机上运行不佳)。效果不佳意味着，在第一台计算机上，它在一页中打印 40 行，但在另一台计算机上，一些行转到下一页打印

怎样才能在所有电脑上正常打印数据

Answer 1

尝试使用 @media print 为您的类 page-break 添加 css2 属性 page-break 而不是手动计算分页符。如果需要，还可以使用特定于 print 的不同比例。

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