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

Question

我想打印大的html内容与页眉和页脚重复在所有的页面，没有重叠使用printThis.js插件。

但是页眉和页脚没有重复。

​

        $("#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似乎没有这个特性。

你可以申请。

同时，您可能需要考虑使用CSS的这种方法。它使用table元素，其中它的thead和tfoot重复，但它的tbody不重复。

引用basic设置

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

作者认为，重要的注释：

• 每个<th>都必须生活在<tr>中才能工作。
• <thead>必须首先出现在<table>中
• 您真的可以在<div class="header-info">中<th>中显示任何您想要的内容，包括其他表。又是1996年了！
• ！非常重要！<tfoot> 必须在 <thead> 之后，但在 tbody>**，之前，即使它在** <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;
}

去看看那篇文章。这是很好的解释，可能是一个很好的解决办法。