在Chrome中重複頁面標題的打印

是否有人有鏈接指向專門從Chrome重複頁眉/頁腳的文章或工作示例？在Chrome中重複頁面標題的打印

背景：
我花了好幾天沒有運氣，有幾個堆棧建議的解決方案，但似乎沒有工作（在Chrome中）。由於我們在工作中使用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?

Creating page headers and footers using CSS for print

如果我不能，使用重複標題/ footers ...然後我的下一個想法是在我的克隆對象中計算我的行數並獲得它b在最大數量處創建一個新的頁面（強制高度），並在另一個div的另一個頁面中再次啓動循環。

我真的很感謝任何有關運行頁眉/頁腳解決方案的建議，因爲我的應用程序的全部內容都是完成的打印提議。

來源

2013-10-28 zzipper72

2016年6月5日在Chrome上修復了[在打印頁面上重複表格標題]（https://bugs.chromium.org/p/chromium/issues/detail?id=24826）。我的版本爲51.0。 2704.103在Mac OS X上運行。 – Ricardo

好吧，沒有這個人的接受者，所以再多看幾天，選擇不寫我自己的解決方案，這是我發現的。

在無票，無註釋的Stack post的最底部是這個孤獨的小鏈接：http://welcome.totheinter.net/columnizer-jquery-plugin/#comment-53243

這東西是真棒，它的設計處理的內容廣泛的網頁，並將它們格式化成像報紙專欄。它處理分頁符特別好，並且非常靈活。

就我而言，我需要一個單列（頁面寬度）並重復頁眉和頁腳。我使用了示例10作爲我的基礎：http://welcome.totheinter.net/autocolumn/sample10.html

我只是將鏈接添加到插件中，更改了必要的ID和類以適合我的頁面，並對高度和寬度進行了一些較小的CSS更改，並且我能夠打印谷歌瀏覽器中帶有重複頁眉和頁腳的多頁內容！（我公司的首選瀏覽器）

TIPS：

一個小把戲CSS，我所做的內容DIV最小高度設置使其推動頁腳下來的短頁面。（如果您希望用戶可以選擇縱向或橫向，請不要這樣做）。我的最終作品是固定的，所以這對我來說很棒。
我測試了內容的不同高度，看它如何打破內容，每次都很順利。

我的確嘗試在JsBin和Fiddle中發佈我的最終示例，但它每次都運行一個錯誤。

所以，上面的例子10是一個很好的開始，因爲它顯示之前和之後。

這是我最後與可變高度的內容和重複的頁眉和頁腳：（這是視圖，當我點擊瀏覽器打印鏈接在Chrome /按鈕） enter image description here

UPDATE2014分之7：一旦Chrome再次成爲我存在印刷問題的禍根。我在下面看到了關於我提供的鏈接的評論。他是對的，它呈現正確，但打印視圖不正確。對不起，但它仍然是一個很好的例子來學習設置。

我仍然在使用這個解決方案，它確實可以工作，但是您必須調整CSS和JS內容大小的var。大小的組合是非常敏感的，但是當你的頁面高度/寬度正確，內容大小正確時，它確實有效。我必須爲法律/信件的紙張大小編寫單獨的函數。這是有限的，但爲我們的目的工作。

我也注意到，根據我的窗口大小，它並不總是看起來不錯，但最終的PRINTED產品與預期的重複頁眉和頁腳一樣，所以我使用了一個直接打印的窗口， t注意到輸出，而是看到了chrome打印渲染。我討厭這些類型的解決方法，但與我的辦公室中的每個人使用Chrome，這是一個必要的罪惡。

來源

2013-10-31 01:09:05 zzipper72

@ zipper72：你能給我一個你打印的答案代碼嗎？ – user3001046

這是一個很棒的解決方案，謝謝！我的修復：'.page {height：958px}''.page .content {min-height：### px; }'。根據頁眉/頁腳高度調整「min-height」和「var content_height」的內容。 – daVe

這是否會解決page-break-before和page-break-inside中的元素：避免樣式？換句話說，如果瀏覽器動態地創建不完全基於內容高度的頁面（page-break-inside：避免在沒有完整頁面高度的內容的情況下可能會中斷頁面），那麼標題仍然會被正確放置嗎？ – lastmjs

不幸的是，這是一個已知的webkit bug（Chrome和Safari） - see here。我試圖找到一個解決方法很多次，但沒有運氣。

從瀏覽器打印時，鏈接到accepted answer的示例似乎不起作用。

來源

2014-01-14 01:48:40 dstefanis

是的，我也看到了，對不起所有人。有利的一面是，我仍然在使用這個解決方案，它確實有效，但是你必須擺弄CSS和JS主體內容的大小。它很敏感，但是當你的頁面高度/寬度正確且內容大小正確時，它確實有效。 -The – zzipper72

此問題的答案取決於文檔的結構。如果它可以構成一系列短而不易破碎的部分，那麼你很幸運！在這種類型的文檔中有一種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大的塊文件這一技術，但它對於包括小文檔的偉大工程，離散的部分，如表格和表格。

我對this other post的回答可能也有意義。它演示瞭如何使用相同的基本原則創建與Chrome兼容的重複表頭，但所有額外的標記都是通過javascript添加的，因此它不會「污染」原始HTML文檔。

來源

2014-09-17 00:03:07 DoctorDestructo

這可能不是您的問題的直接答案，但也許是直接解決您的問題。

在如何解決這個問題燃燒了幾天和幾周之後，我終於放棄了在重複頁眉/頁腳上使用直接html/css打印。我見過很多代碼和樣本，但其中的每個人都不符合我的需求，總是缺少或沒有稍微打印正確。

我可以接受的解決方案是簡單的html，簡單的css和將其轉換爲pdf的組合。你會很驚訝如何簡單的HTML結構和CSS是。

這個解決方案並不完全是我的，而是上面的代碼和wkhtmltopdf庫的組合。請不要驚慌，這是非常容易安裝，這就是我正確使用Windows（MSVC 2013）版本0.12.2.1，我有一個Windows 7 64位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>

Template.html你在PHP了shell_exec看到（內容本教程）是下面。讓我快什麼是這些參數說明：

C：\ wkhtmltopdf \ BIN \ wkhtmltopdf - 這是你安裝了wkhtmltopdf，位置是你的決定，但爲使我用C時接近的緣故：就像教程中的內容一樣。
--orientation橫向 - 這些是可選的參數之一，您可以參考其官方文檔來了解更多可以使用設置執行的操作。
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]：

來源

2015-11-21 12:01:55

我用printThis來解決這個問題。您需要指定打印區域ID或類名稱。

來源

2018-02-01 20:48:07 Tester

在Chrome中重複頁面標題的打印

回答

相關問題