表頭在頁面頂部顯示在打印

Question

我正在嘗試爲我的Web應用程序創建可打印頁面。我遇到了某人的JSFiddle並試圖實現它。

下面是我在下面添加的代碼的鏈接。

http://jsfiddle.net/2wk6Q/5272/

body { 
    margin: 0; 
    padding: 0; 
    background-color: #FAFAFA; 
    font: 12pt "Times New Roman"; 
} 

.report-title{ 
    padding: 0px; 
} 

.org-info{ 
    padding: 0px; 
    font-size: 11px; 
    margin-bottom: 50px; 
} 


* { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

.page { 
    width: 21cm; 
    min-height: 29.7cm; 
    padding: 2cm; 
    margin: 1cm auto; 
    border: 1px #D3D3D3 solid; 
    border-radius: 5px; 
    background: white; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
} 

@page { 
    size: A4; 
    margin: 0; 
} 
@media print { 
    .page { 
     margin: 0; 
     border: initial; 
     border-radius: initial; 
     width: initial; 
     min-height: initial; 
     box-shadow: initial; 
     background: initial; 
     page-break-after: always; 
    } 

    /* 
    table { 
     page-break-inside:auto 
    } 
    tr { 
     page-break-inside: avoid; 
     page-break-after: auto; 
    } 
    thead{ 
     display:table-header-group 
    } 

    tfoot { 
     display:table-footer-group 
    } 
    */ 

} 

它工作得很好，但在包含該表的頁面的頂部顯示錶頭。

這裏是我使用的顯示數據我鬍子的模板。

{{#members}} 
<div class="page"> 
    <h3 class="text-center report-title">{{orgName}} {{year}} Annual Giving Statement</h3> 
    <div class="org-info text-center"> 
     <p>No goods or services were provided, only intangible religious benefits. Tax ID: {{taxId}}</p> 
     <p>{{orgName}} * {{orgAddress1}} {{orgAddress2}} * {{orgCity}}, {{orgState}} {{orgZip}}</p> 
     <p>{{orgContact}} * {{orgEmail}} * {{orgUrl}}</p> 
    </div> 
    <p>{{date}}</p> 
    <address> 
     {{displayName}}<br> 
     {{address1}}<br> 
     {{#address2Exists}} 
     {{address2}}<br> 
     {{/address2Exists}} 
     {{city}}, {{state}} {{zip}} 
    </address> 
    <p> 
     Dear {{displayName}}, 
     <br><br> 
     Thank you so much for your generosity in support of the mission God has given Brian's Test. Below is 
     your tax deductible giving summary of gifts received during the 2016 calendar year. On the following 
     page you will find an itemized giving statement. As a reminder, items purchased, such as shirts, 
     artwork, coffee mugs, etc, are not tax deductible, as well as any monies for an event where goods or 
     services were provided. 
     <br> 
     <br> 
     Also enclosed you will find a copy of the 2016 Budget Report. This report as well as each quarter's 
     report are also available for access online at illcomplacent.com. If you have any questions about this 
     statement or any portion of the budget report, please feel free to call or email us anytime. 
     <br> 
     <br> 
     Sincerly, 
     <br><br><br><br> 
     {{orgContact}} 
    </p> 
</div> 
<div class="page"> 
    <h3 class="text-center">Total {{year}} YTD Tax Deductible Gift: ${{sum}}</h3> 
    <br> 
    <table class="table table-condensed"> 
     <thead> 
      <th>Date Received</th> 
      <th>Type</th> 
      <th>Amount</th> 
     </thead> 
     <tbody> 
      {{#donations}} 
       <tr> 
        <td>{{dateRec}}</td> 
        <td>{{paymentType}}</td> 
        <td>${{amount}}</td> 
       </tr> 
      {{/donations}}    
     </tbody> 
     <tfoot> 
      <td></td> 
      <td></td> 
      <td><strong>${{sum}}</strong></td> 
     </tfoot> 
    </table> 
</div> 
{{/members}} 

我不確定我還有其他的選擇。我需要能夠創建可打印的頁面，因爲它們是報告。如果任何人有任何其他的想法，我完全爲它。

Answer 1

我已經加入了下面的CSS @media print { }

請執行和看看裏面編輯你的第二個片段。

thead { 
     display: table-row-group; 
    } 

此外，在這裏粘貼相同的片段。

window.print();

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #FAFAFA; 
 
    font: 12pt "Times New Roman"; 
 
} 
 

 
.report-title{ 
 
    padding: 0px; 
 
} 
 

 
.org-info{ 
 
    padding: 0px; 
 
    font-size: 11px; 
 
    margin-bottom: 50px; 
 
} 
 

 

 
* { 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
} 
 

 
.page { 
 
    width: 21cm; 
 
    min-height: 29.7cm; 
 
    padding: 2cm; 
 
    margin: 1cm auto; 
 
    border: 1px #D3D3D3 solid; 
 
    border-radius: 5px; 
 
    background: white; 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
 
} 
 

 
@page { 
 
    size: A4; 
 
    margin: 0; 
 
} 
 
@media print { 
 
    .page { 
 
     margin: 0; 
 
     border: initial; 
 
     border-radius: initial; 
 
     width: initial; 
 
     min-height: initial; 
 
     box-shadow: initial; 
 
     background: initial; 
 
     page-break-after: always; 
 
    } 
 
    
 
    thead { 
 
     display: table-row-group; 
 
    } 
 
    
 

 
    /* 
 
    table { 
 
     page-break-inside:auto 
 
    } 
 
    tr { 
 
     page-break-inside: avoid; 
 
     page-break-after: auto; 
 
    } 
 
    thead{ 
 
     display:table-header-group 
 
    } 
 
    
 
    tfoot { 
 
     display:table-footer-group 
 
    } 
 
    */ 
 
    
 
}

{{#members}} 
 
<div class="page"> 
 
    <h3 class="text-center report-title">{{orgName}} {{year}} Annual Giving Statement</h3> 
 
    <div class="org-info text-center"> 
 
     <p>No goods or services were provided, only intangible religious benefits. Tax ID: {{taxId}}</p> 
 
     <p>{{orgName}} * {{orgAddress1}} {{orgAddress2}} * {{orgCity}}, {{orgState}} {{orgZip}}</p> 
 
     <p>{{orgContact}} * {{orgEmail}} * {{orgUrl}}</p> 
 
    </div> 
 
    <p>{{date}}</p> 
 
    <address> 
 
     {{displayName}}<br> 
 
     {{address1}}<br> 
 
     {{#address2Exists}} 
 
     {{address2}}<br> 
 
     {{/address2Exists}} 
 
     {{city}}, {{state}} {{zip}} 
 
    </address> 
 
    <p> 
 
     Dear {{displayName}}, 
 
     <br><br> 
 
     Thank you so much for your generosity in support of the mission God has given Brian's Test. Below is 
 
     your tax deductible giving summary of gifts received during the 2016 calendar year. On the following 
 
     page you will find an itemized giving statement. As a reminder, items purchased, such as shirts, 
 
     artwork, coffee mugs, etc, are not tax deductible, as well as any monies for an event where goods or 
 
     services were provided. 
 
     <br> 
 
     <br> 
 
     Also enclosed you will find a copy of the 2016 Budget Report. This report as well as each quarter's 
 
     report are also available for access online at illcomplacent.com. If you have any questions about this 
 
     statement or any portion of the budget report, please feel free to call or email us anytime. 
 
     <br> 
 
     <br> 
 
     Sincerly, 
 
     <br><br><br><br> 
 
     {{orgContact}} 
 
    </p> 
 
</div> 
 
<div class="page"> 
 
    <h3 class="text-center">Total {{year}} YTD Tax Deductible Gift: ${{sum}}</h3> 
 
    <br> 
 
    <table class="table table-condensed"> 
 
     <thead> 
 
      <th>Date Received</th> 
 
      <th>Type</th> 
 
      <th>Amount</th> 
 
     </thead> 
 
     <tbody> 
 
      {{#donations}} 
 
       <tr> 
 
        <td>{{dateRec}}</td> 
 
        <td>{{paymentType}}</td> 
 
        <td>${{amount}}</td> 
 
       </tr> 
 
      {{/donations}}    
 
     </tbody> 
 
     <tfoot> 
 
      <td></td> 
 
      <td></td> 
 
      <td><strong>${{sum}}</strong></td> 
 
     </tfoot> 
 
    </table> 
 
</div> 
 
{{/members}}