在每个页面打印尽可能多的元素打印

每一页都需要：

页眉和页脚。
要包括的类别尽可能

我尝试做“的位置是：固定”：对于类容器的页眉和页脚，以及“避免分页内有”。第一页看起来不错，但在其他类别中，类别从页面顶部开始，在页眉后面。

的问题是：

有一种方法做，在介质的打印？
如果没有，有什么办法可以让页面看起来像我不想做的，只是打印出来？

这是例子：

<style> 
@media print { 
    .category { 
    page-break-inside: avoid; 
    padding: 10px; 
    } 
    .page { 
    padding-top: 20px; 
    } 
} 

</style> 


<body> 
    <h1 style="position:fixed">this text hide the category in second page </h1> 
    <div class="page"> 
    <div class="category"> 
     Category 1<br/>item<br/>item<br/>item<br/> 
    </div> 
    <div class="category"> 
     Category 2<br/>item<br/>item<br/>item<br/>item<br/>item<br/> 
    </div> 
    <div class="category"> 
     Category 3<br/>item<br/>item 
    </div> 

    <!--and so on --> 
</div> 
</body>

来源

2017-07-28 yantrab

根据页眉/页脚的高度，将顶部和底部填充添加到页面容器中。 –

只有在第一页填充顶部工作... – yantrab

没有[mcve]就很难提供帮助。 –

最后我做到这一点与计算DIV高度每一类别，并在需要时随时添加分页符。

for (let cat of menu.categories) { 
     mywindow.document.write('<div id="' + cat._id + '" class="content">'); 
     // Write category 
     mywindow.document.write('</div>'); //end of content 
    var currentPageDivHeight = mywindow.document.getElementById('A4').clientHeight - (1000 * pageNamber); 
    console.log('currentPageDivHeight:' + currentPageDivHeight) 
    if (currentPageDivHeight > 750) { 
    pageNamber++; 
    mywindow.document.getElementById(cat._id).style.setProperty("page-break-before", 'always'); 
    mywindow.document.getElementById(cat._id).style.setProperty("padding-top", '5cm'); 
    } 
}

来源

2017-08-01 20:50:58 yantrab

在每个页面打印尽可能多的元素打印

回答

相关问题