javascript - 使用 printThis.js 重复页眉和页脚

Question

我想使用 printThis.js 插件在所有页面中重复打印带有页眉和页脚的大型 html 内容而不重叠。

但页眉和页脚不重复。

       
        $("#printKitten").click(function () {
            $("#divContent").printThis({                
                header: $('#divHeader').html,
                footer: $('#divFooter').html
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../Scripts/jquery-3.0.0.min.js"></script>
    <script src="../Scripts/printThis.js"></script>



    <button id="printKitten">Print</button>
    <div id="divHeader">
        HEADER <br />HEADER <br />HEADER <br />HEADER <br />HEADER <br />HEADER <br />
    </div>
    <div id="divContent">
        <p>Content placeholder START...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...</p>
        <p>Content placeholder ...END</p>

    </div>
    <div id="divFooter">
        footer <br />footer <br />footer <br />footer <br />footer <br />footer <br />
    </div>

我也尝试过使用 @media print 但没有成功。

Answer 1

printThis 好像没有这个功能。

你可以要求它。

与此同时，您可能需要考虑 this approach , 使用 CSS。它使用 table元素，其中它的 thead和 tfoot重复，但它是 tbody不再重复。

引用基本设置:

<table class="report-container">
  <thead class="report-header"> </thead>
  <tfoot class="report-footer"> </tfoot>
  <tbody class="report-content"> </tbody>
</table>

作者的重要说明:

• Every <th> must live inside a <tr> to work
• <thead> must appear first in your <table>
• You can really have whatever you want appear in the <div class="header-info"> within the <th>, including other tables. It’s like it’s 1996 again!
• ! Very Important! <tfoot> must be after <thead> but before tbody>, even though it renders after <tbody>.

主要内容

<tbody class="report-content"> 
   <tr> 
      <td>
        <div class="main">
            ...
        </div>
      </td>
   </tr>
</tbody>

CSS

thead.report-header {
   display: table-header-group;
}

tfoot.report-footer {
   display:table-footer-group;
}

tabel.report-container {
    page-break-after: always;
}

去看看那篇文章。它得到了很好的解释，可以作为一个很好的解决方法。