Chromeのページヘッダーを繰り返し印刷する

誰かが記事のリンクやChromeからのページヘッダー/フッターの繰り返しの具体例を持っていますか？Chromeのページヘッダーを繰り返し印刷する

背景：
これは何の問題もなく、いくつかのスタックの提案された解決策がありますが、（Chromeでは）うまくいかないようです。私たちは仕事場でChromeを使用しているので、私はそこでしかテストしていないので、以下に挙げる多くのことはChromeがそれを行うことはできないと言いますが、

Iは、これらのスタックのリンクを試みた（..andより多く）：

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

をIは、ヘッダを繰り返して使用できない場合/ footers ...次に私の考えは、クローンオブジェクト内の行を数え、それをb最大数にリークし、新しいページ（強制的な高さ）を作成し、別のdivの別のページでループを再開します。

私のアプリの全体的なポイントが完成した印刷された提案だったので、ヘッダー/フッターソリューションの実行に関する提案を本当に感謝します。

出典

2013-10-28 zzipper72

[印刷されたページの表の見出しを繰り返す]（https://bugs.chromium.org/p/chromium/issues/detail?id=24826）は、2016年6月5日にChromeで修正されました。バージョンは51.0です。 2704.103をMac OS X上にインストールすれば動作します。 – Ricardo

これでいいのですが、もう一度見て周りに自分の解決策を書かないことを選択して、ここに私が見つけたものがあります。 http://welcome.totheinter.net/columnizer-jquery-plugin/#comment-53243

この事は素晴らしいですが、コンテンツの幅広いページを処理し、新聞などの列にそれらをフォーマットするように設計されています：いいえ投票やコメントはありませんとStack postの一番下に

はこの孤独少しのリンクでした。特にページ区切りを処理し、非常に柔軟性があります。

私の場合は、単一の列（ページの幅）とヘッダーとフッターを繰り返す必要がありました。 http://welcome.totheinter.net/autocolumn/sample10.html

プラグインへのリンクを追加し、必要なIDとクラスをマイページに合わせて変更し、CSSのマイナーチェンジと幅をマイナーチェンジして印刷できました。 Google Chromeでヘッダーとフッターが繰り返されるマルチページコンテンツ（私の会社の優先ブラウザ）

TIPS：

一つの小さなCSSのトリック、私がコンテンツを作ったのdivそれが短いページのフッターを押し下げるようMIN-HEIGHTを設定します。（ユーザーにポートレートまたはランドスケープのオプションを持たせたい場合は、これを行わないでください）。私の最終的な印刷物は修正されているので、これは私にとって素晴らしいものでした。
コンテンツをどのように破壊するかを確認するために、コンテンツの高さをテストしましたが、毎回滑らかでした。

最後の例をJsBinとFiddleに投稿しようとしましたが、毎回エラーが発生しました。

ここでも、上記の例10は、前後に示すように開始するのに最適な場所です。一度：（私はChromeのブラウザの印刷リンク/ボタンをクリックしたときに、これはビューである） enter image description here

UPDATE 2014分の7：ここで

は私の高さが可変コンテンツを含む最終的なヘッダーとフッターを繰り返すことですもう一度Chromeが印刷物の問題で私の存在の悩みです。私が提供したリンクについて、以下のコメントを見ました。彼は正しく、レンダリングは正しく行われますが、印刷ビューは正しくありません。申し訳ありませんが、まだ設定を学ぶのに良い例です。

私はまだこのソリューションを使用していますが、機能はありますが、本文コンテンツサイズのCSSとJS varを調整する必要があります。サイジングの組み合わせは非常に敏感ですが、ページの高さ/幅を右に、コンテンツのサイズを正しく取得すると機能します。私は紙サイズのリーガル/レター用に別々の機能を書かなければならなかった。限られていますが、私たちの目的のために働きます。

また、私のウィンドウのサイズによっては、必ずしも正しく見えるとは限りませんでしたが、最終的なPRINTED製品はヘッダーとフッターが繰り返されているので、印刷してすぐに印刷されたので、出力に気付くのではなく、クロムプリントレンダリングを見た。私はこれらのタイプの回避策が嫌いですが、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の要素を扱うでしょうか？スタイルを避けますか？言い換えると、ブラウザがコンテンツの高さに完全に基づいていないページを動的に作成している場合（ページ区切り：コンテンツの全ページ高さがなくてもページが破損する可能性はない）、ヘッダーは適切に配置されますか？ – lastmjs

残念ながら、これは既知のウェブキットのバグです（ChromeとSafari） - see here。私は何回も回避策を見つけようとしましたが、運がありません。

accepted answerにリンクされている例は、ブラウザから印刷すると機能しないようです。

出典

2014-01-14 01:48:40 dstefanis

そうです、私もそれを見て、ごめんなさい。私はまだこのソリューションを使用していますが、それはうまくいきますが、あなたはCSSとJS本体のコンテンツサイズを試す必要があります。 ITS VERY Sensativeですが、ページの高さ/幅を右に、コンテンツサイズを正しく取得すると機能します。 - – 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互換のリピートテーブルヘッダーを作成する方法を示しますが、余分なマークアップはすべて元のHTMLドキュメントを「汚染」しないようにjavascriptで追加されています。

出典

2014-09-17 00:03:07 DoctorDestructo

これはあなたの質問に直接的な答えではないかもしれませんが、おそらくあなたの問題に対する直接の解決策です。

この問題を解決する方法の日数と数週間を焼くと、最終的にヘッダー/フッターの繰り返しで直接html/css印刷を使用することをやめました。私は多くのコードとサンプルを見てきましたが、それらのすべてが正確に私のニーズを満たしていません。

解決策は私にとっては受け入れやすい単純なhtml、単純なCSSとこれをpdfに変換することです。あなたはhtmlの構造とCSSがいかにシンプルなのか驚くでしょう。

このソリューションは完全に私のものではなく、上記のコードとwkhtmltopdfライブラリの組み合わせです。私がWindows（MSVC 2013）バージョン0.12.2.1を正確に使用したのは、これはインストールが非常に簡単です。フリーズアウトしないでください。私はスタックとしてxamppを使ってWindows 7 64bitを持っています。あなたはある）このコード

<?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のコンテンツを作成することができるはずですどのようにInstall wkhtmltopdf

インストールした後に、このチュートリアルに従うことができます以下。私は素早くこれらのパラメータがある何であるかを説明しましょう：

C：\ wkhtmltopdfの\ビン\のwkhtmltopdf - これはあなたがwkhtmltopdfをインストールした場所、場所はあなたが決めることですが、私はCを使用し、それがアクセスできるようにするためにあります：チュートリアルのようにドライブしてください。
- landscape - これらはオプションのパラメータの1つです。公式のドキュメントを参照して、設定でできることをもっと知ることができます。
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のページヘッダーを繰り返し印刷する

答えて

関連する問題