页脚最后一页只有html + css

时间:2016-04-12 19:24:38

标签: html css printing

我有一个在屏幕上正常工作的页面。当我调用ctrl + p时,一切正常,但页脚在每一页都重复。我想在最后一页打印我的页脚。

我已经有了.scss来定制一些东西。我的HTML是这样的:

                    <md-table-container>
        <table md-table>
            <thead md-head>
                <tr md-row>
                    <th md-column><span>{{'relatorioVenda.produtoVariacao'|translate}}</span></th>
                    <th md-column><span>{{'relatorioVenda.qtde'|translate}}</span></th>
                    <th md-column><span>{{'relatorioVenda.valor'|translate}}</span></th>
                </tr>
            </thead>
            <tbody md-body ng-repeat="produto in ctrl.resumoPorProduto.produtos track by produto.produtoId">
                <!-- item -->
                <tr md-row class="item">
                    <td md-cell>{{produto.descricao}}</td>
                    <td md-cell>{{produto.quantidade}}</td>
                    <td md-cell>{{produto.totalVenda | currency}}</td>
                </tr>
                <!-- subitem -->
                <tr md-row ng-repeat="variacao in produto.variacoes track by variacao.produtoVariacaoId">
                    <td md-cell class="sub-item"><md-icon md-font-icon="zmdi zmdi-chevron-right"></md-icon> {{::variacao.descricao}}</td>
                    <td md-cell>{{variacao.quantidade}}</td>
                    <td md-cell>{{variacao.totalVenda | currency}}</td>
                </tr>
            </tbody>
            <tfoot md-foot>
                <tr md-row class="total">
                    <td md-cell>{{'relatorioVenda.total'|translate}}</td>
                    <td md-cell></td>
                    <td md-cell>{{ctrl.resumoPorProduto.totalVenda | currency}}</td>
                </tr>
            </tfoot>
        </table>
    </md-table-container>

我的scss:

.total {
    background: #f5f5f5;
}

但到目前为止还不知道如何在最后一页上打印。有什么想法吗?

最好的问候。

1 个答案:

答案 0 :(得分:0)

您好,您是否考虑过媒体查询?类似的东西:

<link rel="stylesheet" type="text/css" href="print-style.css" media="print" />

然后你可以在第一页中将display: none;设置为页脚。