html - 页脚最后一页只有 html + css

Question

我有一个页面在屏幕上运行良好。当我调用 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;
}

但是直到现在还不知道如何只在最后一页打印。有什么想法吗？

最好的问候。

Answer 1

您好，您考虑过媒体查询吗？像这样的东西:

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

然后你可以设置display: none;到第一页的页脚。