Question

我正在尝试为我的网络应用创建可打印页面。我遇到了某个人的JSFiddle并且一直试图实现它。

以下是我添加的代码的链接。

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

我已通过在@media print { }

中添加以下css来编辑您的第二个代码段

请执行并查看。

thead {
      display: table-row-group;
    }

另外，在这里粘贴了相同的片段。

＆＃13;

window.print();

＆＃13;

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 
    }
    */
    
}

＆＃13;

{{#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}}

＆＃13;

表格标题在打印期间显示在页面顶部

1 个答案: