jQuery 在 Chrome 中打印重复的页眉

Print repeating Page headers in Chrome

提问by zzipper72

Does anyone have a link to an article or working example of repeating page headers/footers from Chrome specifically?

有没有人有专门从 Chrome 重复页面页眉/页脚的文章或工作示例的链接？

Background:
I've spent days on this with no luck, there are several Stack proposed solutions but none seem to work (in Chrome). Since we use Chrome at work I've only tested there, so a lot these below say Chrome just can't do it, but maybe I overlooked something?

背景：
我花了好几天的时间都没有运气，有几个 Stack 提出的解决方案，但似乎都没有工作（在 Chrome 中）。由于我们在工作中使用 Chrome，我只在那里测试过，所以下面的很多内容都说 Chrome 无法做到，但也许我忽略了一些东西？

I tried these Stack links (..and many more):

我尝试了这些 Stack 链接（……还有更多）：

Print footer on every printed page from website, across all browsers (Chrome)

在网站的每个打印页面上打印页脚，跨所有浏览器 (Chrome)

Is there a way to get a web page header/footer printed on every page?

有没有办法在每一页上打印网页页眉/页脚？

How to use HTML to print header and footer on every printed page of a document?

如何使用 HTML 在文档的每个打印页面上打印页眉和页脚？

Creating page headers and footers using CSS for print

使用 CSS 创建页眉和页脚进行打印

If I can't, use repeating header/footers ...then my next idea is to count my rows in my clone object and have it break at a max number, create a new page (forced height) and start the loop again in another page in another div.

如果我不能，使用重复的页眉/页脚......那么我的下一个想法是计算我的克隆对象中的行数并让它在最大数量处中断，创建一个新页面（强制高度）并再次开始循环另一个 div 中的另一个页面。

I truly appreciate any suggestions on running header/footer solution as the whole point to my app was the finished printed proposal.

我非常感谢有关运行页眉/页脚解决方案的任何建议，因为我的应用程序的重点是完成的打印提案。

回答by zzipper72

Ok, no takers on this one, so with a few more days of looking around and choosing not to write my own solution, here is what I found.

好的，没有人接受这个，所以再多花几天环顾四周并选择不编写我自己的解决方案，这就是我发现的。

At the very bottom of a Stack postwith no votes and no comments was this lonely little link: http://welcome.totheinter.net/columnizer-jquery-plugin/#comment-53243

在没有投票和评论的Stack 帖子的最底部是这个孤独的小链接：http: //welcome.totheinter.net/columnizer-jquery-plugin/#comment-53243

This thing is awesome, it's designed to handle wide pages of content and format them into columns like a newspaper. It handles page breaks especially well and is quite flexible.

这个东西很棒，它旨在处理宽页的内容并将它们格式化为像报纸一样的专栏。它特别好地处理分页符并且非常灵活。

In my case, I needed a single column (width of the page) and repeating headers and footers. I used Example 10 as my base:http://welcome.totheinter.net/autocolumn/sample10.html

就我而言，我需要一列（页面宽度）和重复的页眉和页脚。我使用示例 10 作为我的基础：http: //welcome.totheinter.net/autocolumn/sample10.html

I simply added the link to the plug in, changed the necessary IDs and classes to suit my page, and made some minor CSS changes to heights and widths and I was able to print multi-page content with repeating headers and footers in Google Chrome! (my company's preferred browser)

我只是简单地添加了插件的链接，更改了必要的 ID 和类以适合我的页面，并对高度和宽度进行了一些小的 CSS 更改，我能够在 Google Chrome 中打印带有重复页眉和页脚的多页内容！（我公司首选浏览器）

TIPS:

提示：

• One little CSS trick, I made the content div MIN-HEIGHT set so it pushed the footer down on short pages. (Don't do this if you want the user to have the option of portrait or landscape). My final print is fixed so this was great for me.

• I tested different heights on content to see how it breaks the content, it was smooth everytime.

• 一个小的 CSS 技巧，我设置了内容 div MIN-HEIGHT 设置，以便它在短页面上将页脚向下推。（如果您希望用户可以选择纵向或横向，请不要这样做）。我的最终印刷品是固定的，所以这对我来说很棒。

• 我在内容上测试了不同的高度，看看它是如何破坏内容的，每次都很流畅。

I did try to post my final example in JsBin and Fiddle, but it ran an error each time.

我确实尝试在 JsBin 和 Fiddle 中发布我的最后一个示例，但每次都会出错。

So again, Example 10 above is a great place to start as it shows before and after.

同样，上面的示例 10 是一个很好的起点，因为它显示了之前和之后。

Here is my final with variable height content and repeating Headers and Footers: (this is the view when I click the browser Print Link/Button in Chrome )

这是我最终的可变高度内容和重复的页眉和页脚：（这是我在 Chrome 中单击浏览器打印链接/按钮时的视图）

UPDATE 7/2014:Once again Chrome is the bane of my existence with print issues. I saw the comment below about the link that I provided. He's right, it renders correctly but the print view is incorrect. Sorry about that, but it's still a good example to play with to learn the settings.

更新 7/2014：Chrome 再次成为我存在打印问题的祸根。我看到下面关于我提供的链接的评论。他是对的，它呈现正确但打印视图不正确。很抱歉，但它仍然是学习设置的一个很好的例子。

I am still using this solution, IT DOES work, but you have to adjust the CSS and the JS var for body content size. The sizing combinations are VERY Sensitive, but when you get the page height/width right and the content size right, it does work. I had to write separate functions for paper sizes legal/letter. It's limited but works for our purposes.

我仍在使用此解决方案，它确实有效，但是您必须针对正文内容大小调整 CSS 和 JS 变量。大小组合非常敏感，但是当您获得正确的页面高度/宽度和正确的内容大小时，它确实有效。我不得不为legal/letter 的纸张尺寸编写单独的函数。它是有限的，但适用于我们的目的。

I also noticed that depending on my window size it did not not always look right, but the final PRINTED product was as expected with repeating headers and footers, so I used a window that went straight to print so the user didn't notice the output, but rather saw the chrome print rendering. I hate these types of workaround but with everyone in my office using Chrome, it's a necessary evil.

我还注意到，根据我的窗口大小，它并不总是看起来正确，但最终打印的产品与预期的一样，带有重复的页眉和页脚，所以我使用了一个直接打印的窗口，因此用户没有注意到输出，而是看到了 chrome 打印渲染。我讨厌这些类型的解决方法，但我办公室里的每个人都使用 Chrome，这是一种必要的邪恶。

回答by Kim Michael Gutierrez

This may not be a direct answer to your question but maybe the direct solution to your problem.

这可能不是您问题的直接答案，但可能是您问题的直接解决方案。

After burning days and weeks on how to solve this problem, I have finally given up using direct html/css printing on repeating headers/footers. I've seen a lot of codes and samples, but everyone of them does not meet what exactly my needs, there is always missing or not marginally printing correct.

在花了几天和几周的时间来解决这个问题之后，我终于放弃了在重复的页眉/页脚上使用直接的 html/css 打印。我看过很多代码和示例，但它们中的每个人都不能完全满足我的需求，总是缺少或几乎没有打印正确。

The solution to which is acceptable to mine is a combination of simple html, simple css and converting this to pdf. You'll be surprise how just simple the html structure and css is.

我可以接受的解决方案是简单的 html、简单的 css 并将其转换为 pdf 的组合。您会惊讶于 html 结构和 css 是多么简单。

This solution is not entirely mine, but a combination of codes above and wkhtmltopdf library. Please don't freak-out this is very easy to install, this is what I exactly used Windows (MSVC 2013) Version 0.12.2.1, I have a windows 7 64bit with xampp as my stack. You may follow this tutorial on how to Install wkhtmltopdf

这个解决方案不完全是我的，而是上面代码和 wkhtmltopdf 库的组合。请不要惊慌，这很容易安装，这正是我使用的 Windows (MSVC 2013) 版本 0.12.2.1，我有一个 Windows 7 64 位 xampp 作为我的堆栈。您可以按照本教程安装 wkhtmltopdf

After installation you should be able to produce this code

安装后，您应该能够生成此代码

<?php
// Test correct and failed output
// shell_exec('c:\wkhtmltopdf\bin\wkhtmltopdf --asdasdsadsad 2>> err1.txt 1>> out1.txt');
shell_exec('c:\wkhtmltopdf\bin\wkhtmltopdf --orientation Landscape C:\xampp\htdocs\test\Template.html google.pdf');
?>
<html>
    <head>
    </head>
    <body>
        <p>Magical ponies!</p>
    </body>
</html>

The content of Template.html you see in php shell_exec() is below. Let me explain quick what are these parameters are:

您在 php shell_exec() 中看到的 Template.html 的内容如下。让我快速解释一下这些参数是什么：

• c:\wkhtmltopdf\bin\wkhtmltopdf - This is where you installed the wkhtmltopdf, location is yours to decide but for the sake of making it accessible I used C: drive just like what in the tutorial.
• --orientation Landscape - These are one of the may optional parameters, you may refer to its official doc to know more things that you can do with the settings.
• C:\xampp\htdocs\test\Template.html - This is the location of your html file that you want to convert, unfortunately I think you can't direct feed an html string.
• google.pdf - Name and location of the generated file.

• c:\wkhtmltopdf\bin\wkhtmltopdf - 这是您安装 wkhtmltopdf 的位置，位置由您决定，但为了使其易于访问，我使用了 C: 驱动器，就像教程中的一样。
• --orientation Landscape - 这些是可选参数之一，您可以参考其官方文档以了解您可以使用设置执行的更多操作。
• C:\xampp\htdocs\test\Template.html - 这是您要转换的 html 文件的位置，不幸的是，我认为您不能直接提供 html 字符串。
• google.pdf - 生成文件的名称和位置。

<!DOCTYPE html>
<html>
    <head>
    <style>
    a{
        color: black;
        text-decoration: none;
    }
    a:hover{
        cursor: inherit;
    }
    #main-report{
        width: 100%;
    }
    table { 
        color: #333;
        font-family: Helvetica, Arial, sans-serif;
        width: 640px; 
        border-collapse: collapse; 
        border-spacing: 0; 
    }
    td, th { 
        border: 1px solid transparent; /* No more visible border */
        height: 30px; 
        font-size: 11px;
    }
    th {
        background: #DFDFDF;  /* Darken header a bit */
        font-weight: bold;
    }
    td {
        background: #FAFAFA;
        text-align: center;
    }
    /* Cells in even rows (2,4,6...) are one color */ 
    tr:nth-child(even) td { background: #F1F1F1; }
    /* Cells in odd rows (1,3,5...) are another (excludes header cells)  */ 
    tr:nth-child(odd) td { background: #FEFEFE; }
    table, tr, td, th, tbody, thead, tfoot {
        page-break-inside: avoid !important;
    }
    </style>
    </head>
    
    <body>
        <table id="main-report">
            <thead>
                <tr>
                    <th colspan="9">Inventory</th>
                    <th colspan="8">Inspection Report</th>
                </tr>
                <tr>
                    <th rowspan="2">Description</th>
                    <th rowspan="2">Serial No.</th>
                    <th rowspan="2">Qty</th>
                    <th rowspan="2">Unit Cost</th>
                    <th rowspan="2">Total Cost</th>
                    <th rowspan="2">Property No.</th>
                    <th rowspan="2">Date Acquired</th>
                    <th rowspan="2">Years in Service</th>
                    <th rowspan="2">Accumulated Depreciation</th>
                    <th colspan="5">Disposition</th>
                    <th rowspan="2">Appraisal 14</th>
                    <th rowspan="2">OR No.</th>
                    <th rowspan="2">Amount</th>
                </tr>
                <tr>
                    <th>9</th>
                    <th>10</th>
                    <th>11</th>
                    <th>12</th>
                    <th>13</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000001</td>
                    <td>11/03/2000</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000002</td>
                    <td>11/03/2015</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000003</td>
                    <td>11/03/2015</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td>SN00001</td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000004</td>
                    <td>11/03/2015</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000005</td>
                    <td>11/03/2015</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000006</td>
                    <td>11/03/2015</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td>faksdjfh skdjh h lsdjl ksd <br/> asdfjdhsfljshdfjksahdf <br/> jsdhfjsadhfjsahfkjsdhkjh</td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000007</td>
                    <td>11/03/2015</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000008</td>
                    <td>11/03/2015</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000009</td>
                    <td>11/03/2015</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000010</td>
                    <td>11/04/2015</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>60,000.00</td><!-- UNIT COST -->
                    <td>60,000.00</td><!-- TOTAL COST-->
                    <td>000011</td>
                    <td>11/04/2015</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
            </tbody>
        </table>
    <script>
    </script>
</body></html>

here is the final result

这是最终结果

[1]:

[1]：

回答by DoctorDestructo

The answer to this question depends on the structure of your document.If it can be structured as a series of short, unbreakable sections, then you're in luck! There is a Chrome-compatible way to simulate running page headers in this type of document (actually, it works in all of the popular desktop browsers).

这个问题的答案取决于文档的结构。如果它可以被构造成一系列简短的、牢不可破的部分，那么你就走运了！有一种 Chrome 兼容的方式来模拟在这种类型的文档中运行页面标题（实际上，它适用于所有流行的桌面浏览器）。

The basic idea is to put a copy of the header at the top of each unbreakable section, and then use a negative margin to hide the copy so that it will only be seen if a page break bumps the section to the next page. That's a bit of an oversimplification, though, so I would recommend studying the code below before trying this on your own documents.

基本思想是在每个不可破坏部分的顶部放置一个标题的副本，然后使用负边距隐藏副本，以便只有在分页符将该部分撞到下一页时才会看到它。不过，这有点过于简单化了，所以我建议在您自己的文档上尝试之前研究下面的代码。

Test doc:

测试文档：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .section {
        display: table;
        width: 100%;
      }
      .section > div {
        display: table-cell;
        overflow: hidden;
      }
      .section ~ .section > div:before {
        content: "";
        display: block;
        margin-bottom: -2.5em; /* inverse of header height */
      }
      .section > div > div {
        page-break-inside: avoid;
        display: inline-block;
        width: 100%;
        vertical-align: top;
      }
      .header {
        height: 2.5em; /* header must have a fixed height */
      }
      .content { /* this rule set just adds space between sections and is not required */
        margin-bottom: 1.25em;
      }
    </style>
  </head>
  <body>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div>
        <div>
          <div class="header">
            PAGE HEADER
          </div>
          <div class="content">
            Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/>
            Unbreakable section.<br/>Unbreakable section.
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

You wouldn't want to use this technique in documents that have blocks of text larger than about 1/3 of a page, but it works great for docs that consist of small, discrete sections, such as forms and tables.

您不希望在文本块大于页面 1/3 的文档中使用此技术，但它适用于由小而离散的部分（例如表单和表格）组成的文档。

My answer to this other postmight also be of interest. It shows how to create Chrome-compatible repeating table headers using the same basic principles, but all the extra markup is added via javascript so that it doesn't "pollute" the original HTML doc.

我对另一篇文章的回答可能也很有趣。它展示了如何使用相同的基本原则创建与 Chrome 兼容的重复表头，但所有额外的标记都是通过 javascript 添加的，因此它不会“污染”原始 HTML 文档。

回答by dstefanis

Unfortunately it's a known webkit bug (Chrome and Safari) - see here. I've tried to find a workaround many times, but with no luck.

不幸的是，这是一个已知的 webkit 错误（Chrome 和 Safari） -请参阅此处。我曾多次尝试找到解决方法，但都没有成功。

The example linked to for the accepted answerdoesn't seem to work when you print from browser.

当您从浏览器打印时，链接到已接受答案的示例似乎不起作用。

回答by Tester

I use printThisto solve the issue. You need to specify the printing area id or class name.

我使用printThis来解决这个问题。您需要指定打印区域 id 或类名。