打印多页html，动态编号页面和页脚

Question

我有一个很长的HTML页面(4个打印页面，或多或少)。我希望能够控制分页符的位置，以便计算页面高度和在另一页中分页，并使用javacript或jquery动态编号页面，以及在页脚上设置页数。

如果不是HTML，用Javascript或Jquery怎么样，我能那样做吗？有什么想法或建议吗？

CSS文件：

<style type="text/css" media="print">
@page 
{
size: auto;   /* auto is the initial value */
margin: 0mm;  /* this affects the margin in the printer settings */
}
#print-button {
    display: none;
}

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
    footer {page-break-after: always;}

     p {page-break-inside: always;}

     table {page-break-before: always}

    div {page-break-after: always;}
    thead { display:table-header-group }
    tfoot { display:table-footer-group }

   .page-break  {  
    display:block;  
    page-break-before:always; 
    } 
    div.divFooter {
            position: fixed;
            bottom: 0;
        }

        <hr> {
    page-break-after: avoid;
  }
}


 div.d0
      {
        page-break-after: always;
        page-break-inside: avoid;
      }
div.CSSTableGenerator
      {
        page-break-after: always;
        page-break-inside: avoid;
      }

#page-number:after {
    counter-increment: page_number;
    content: "Page " counter(page_number);
}
body {
    counter-reset: page_number;
}
</style>

和HTML文件：

 <div id="d0" style="page-break-inside: avoid;">
<div id="d2" style="page-break-inside: avoid;">
 <p style="font-size:16px;"><?php echo $Article;?>  
</div>
</div>
<div class="CSSTableGenerator" style="page-break-inside: avoid;">
            <table>
                <tr>
                   <td>Article</td>
                   <td>Quantity</td>
                   <td>Price</td>
                   <td>Stock</td>
                </tr>
                <tr>
                  <td>Value</td>
                  <td>Value</td>
                  <td>Value</td>
                  <td>Value</td>
               </tr> 
        </table> 
</div>
<div id="footer">
   <hr>
</div>

这是动态使用PHP的多个表的形式。

Answer 1

实现这一点的一种方法是使用分页符CSS属性。

在CSS文件中，

@media print {
  .page-breaker { 
    page-break-before: always;
  }
}

在HTML中，

<p>
 a very lengthy paragraph
</p>
<p class="page-breaker">
  another long paragraph
</p>

在打印模式下，在第一个

之后将有一个分页符。

要在表格中分页，可以使用以下命令：

@media print {
  table { 
    page-break-inside:auto; 
  }
  tr { 
    page-break-inside:avoid;
    page-break-after:auto 
  }
}

要了解更多信息，请访问https://css-tricks.com/almanac/properties/p/page-break/