页脚最后一页只有 html + css [英] Footer last page only html + css

问题描述

我有一个在屏幕上运行良好的页面.当我调用 ctrl + p 时一切正常，但页脚在每一页上重复.我只想在最后一页打印页脚.

I have a page that works fine on screen. When I call ctrl + p everything works fine, but footer repeats on every page. I would like to print my footer only on the last page.

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

I already have a .scss to customize some things. My HTML is like this:

                    <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;
}

但直到现在不知道如何只在最后一页上打印.有什么想法吗?

But till now no idea on how to print only on the last page. Any idea?

最好的问候.

推荐答案

您好，您考虑过媒体查询吗?类似的东西:

Hello did you thought about media queries? Something like :

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

然后您可以将 display: none; 设置为第一页的页脚.

And then you can maybe set display: none; to the footer in first pages.

这篇关于页脚最后一页只有 html + css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！