在 Chrome 中打印重复的页眉 [关闭]

【问题标题】：Print repeating Page headers in Chrome [closed]在 Chrome 中打印重复的页眉 [关闭]
【发布时间】：2013-11-07 22:27:46
【问题描述】：

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

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

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

Print footer on every printed page from website, across all browsers (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?

Creating page headers and footers using CSS for print

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

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

【问题讨论】：

标签： javascript jquery html css google-chrome


【解决方案1】：

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

在Stack post 的最底部，没有投票也没有 cmets，是这个孤独的小链接：http://welcome.totheinter.net/columnizer-jquery-plugin/#comment-53243

这东西太棒了，它旨在处理宽页面的内容并将它们格式化为像报纸一样的栏目。它对分页符的处理特别好，而且非常灵活。

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

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

提示：

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

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

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

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

这是我的最终内容，内容高度可变，页眉和页脚重复： （这是我在 Chrome 中单击浏览器 Print Link/Button 时的视图）

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

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

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

【讨论】：

  • @zipper72 : 你能给我一个你打印出来的答案代码吗？
  • 这是一个很好的解决方案，谢谢！我的修复：.page{ height:958px }.page .content { min-height:###px; }。根据您的页眉/页脚高度调整内容min-height 和var content_height。
  • 这是否会考虑具有 page-break-before 和 page-break-inside 的元素：避免样式？换句话说，如果浏览器不是完全基于内容的高度来动态创建页面（page-break-inside：避免即使没有完整的内容页面高度也会破坏页面），标题仍然会正确放置吗？
【解决方案2】：

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

当您从浏览器打印时，链接到 accepted answer 的示例似乎不起作用。

【讨论】：

  • 是的，我也看到了，对不起大家。从好的方面来说，我仍在使用这个解决方案，它确实有效，但你必须摆弄 CSS 和 JS 正文内容的大小。它非常敏感，但是当您获得正确的页面高度/宽度和正确的内容大小时，它确实有效。 -该
【解决方案3】：

这个问题的答案取决于您的文档的结构。如果它可以被构建为一系列简短的、牢不可破的部分，那么您很幸运！有一种与 Chrome 兼容的方法可以模拟在此类文档中运行的页眉（实际上，它适用于所有流行的桌面浏览器）。

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

测试文档：

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

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

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

【讨论】：

    【解决方案4】：

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

    在如何解决这个问题上花费了数天和数周后，我终于放弃了在重复的页眉/页脚上使用直接 html/css 打印。我看过很多代码和示例，但每个人都不能满足我的需求，总是丢失或打印不正确。

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

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

    安装后你应该可以生成这个代码

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

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

    • 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]：

    【讨论】：

      【解决方案5】：

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

      【讨论】：

        猜你喜欢
        • 2016-07-12
        • 2022-09-23
        • 2018-09-21
        • 2021-01-18
        • 2011-12-08
        • 2012-07-15
        • 1970-01-01
        • 2011-11-08
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode