在每個頁面打印儘可能多的元素打印

每一頁都需要：

頁眉和頁腳。
要包括的類別儘可能

我嘗試做「的位置是：固定」：對於類容器的頁眉和頁腳，以及「避免分頁內有」。第一頁看起來不錯，但在其他類別中，類別從頁面頂部開始，在頁眉後面。

的問題是：

有一種方法做，在介質的打印？
如果沒有，有什麼辦法可以讓頁面看起來像我不想做的，只是打印出來？

這是例子：

<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

在每個頁面打印儘可能多的元素打印

回答

相關問題