フッター最後のページのみ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;を設定することができます。