打印多页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

实现此目的的一种方法是使用 page-break 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/