用JavaScript和CSS

多頁打印我對着顯示頁號，同時打印多個多頁的報告用JavaScript和CSS

以下是示例HTML格式的問題：

<style type="text/css"> body { 
 
    counter-reset: report 1 page 0; 
 
} 
 
td.footer:after { 
 
    counter-increment: page; 
 
    content: "Page " counter(page)" of Report " counter(report); 
 
} 
 
.rowLabel3 { 
 
    counter-reset: page 0; 
 
    counter-increment: report 
 
} 
 
</style>

<table> 
 
    <thead style="display: table-header-group;"> 
 
    <tr> 
 
     <th>Report Specific Header Contents which needs to come on every page we are displaying report</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody style="display: table-row-group;"> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data</td> 
 
    </tr> 
 

 
    </tbody> 
 
    <tfoot style="display: table-footer-group;"> 
 
    <tr> 
 
     <td class="footer"> 
 

 
     </td> 
 
    </tr> 
 
    </tfoot> 
 
</table> 
 

 
<div class="rowLabel3" style="page-break-after:always;">*** END OF REPORT ***</div> 
 

 
<table> 
 
    <thead style="display: table-header-group;"> 
 
    <tr> 
 
     <th>Report Specific Header Contents which needs to come on every page we are displaying report</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody style="display: table-row-group;"> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some Data1</td> 
 
    </tr> 
 
    </tbody> 
 
    <tfoot style="display: table-footer-group;"> 
 
    <tr> 
 
     <td class="footer"> 
 

 
     </td> 
 
    </tr> 
 
    </tfoot> 
 
</table> 
 
<div class="rowLabel3" style="page-break-after:always;">*** END OF REPORT ***</div>

這裏，當Tfoot出現在每個頁面上它實際上並沒有增加該部分。

如果這種方法是正確的，我試過的也是計算行數，然後在40行之後添加額外的行並添加分頁符與頁數。但是，這在不同報告中並不一致。

來源

2015-02-24 user3844420

爲什麼你使用'@ page'？當我使用'身體'它的工作 – 2015-02-24 10:48:28

是這樣的工作：

body { 
    counter-reset: report 1 page 0 ; 
} 

td.footer:after { 
    counter-increment: page; 
    content: "Page " counter(page) " of Report " counter(report); 
} 
.rowLabel3{ 
    counter-reset: page 1; 
    counter-increment: report 
}

我只是改變@page和重命名

來源

2015-02-24 10:50:59

感謝您的幫助，我嘗試了上述建議，並更新相應的HTML，實際上看起來像，但一些如何頁面不增加，我期待作爲表頁腳類是頁腳組，只要頁面將打破tfoot將被畫在底部，我的TD有類作爲頁腳，這將增加頁面。 – user3844420 2015-02-24 12:00:06

用JavaScript和CSS

回答

相關問題