Question

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

但页眉和页脚不会重复。

＆＃13;

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

＆＃13;

<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>

＆＃13;

我也试过@media print，但没有运气。

Answer 1

printThis似乎没有此功能。

你可以要求它。

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

引用基本设置：

<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;
}

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

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

1 个答案: