时间戳

首页 > 解决方案 > 使用 printThis.js 重复页眉和页脚

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

问题描述

我想使用 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但没有运气。

标签： javascriptjqueryhtmlcssprintthis

解决方案

printThis好像没有这个功能。

你可以要求。

同时，您可能需要考虑使用 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>

根据作者的重要说明：

  • 每个人都<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;
}

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

推荐阅读