Footer последняя страница только 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> 

И мой СКС:

.total { 
    background: #f5f5f5; 
} 

Но до сих пор ни малейшего представления о том, как печатать только на последней странице. Есть идеи?

С уважением.

Answer 1

Привет, вы задумывались о медиа-запросах? Что-то вроде:

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

И тогда вы можете возможно установить display: none; в сноске в первых страницах.