Chromeで繰り返しページヘッダーを印刷
Chromeからのページヘッダー/フッターを繰り返す記事または実際の例へのリンクはありますか？
バックグラウンド：
私はこれに何日も費やしましたが、Stackにはいくつかの提案されたソリューションがありますが、動作しないようです（Chromeで）。私たちはChrome=を使用しているので、そこでしかテストしていません。そのため、以下ではこれらの多くがChrome ？
私はこれらのスタックリンクを試しました（そして、もっとたくさん）：
すべてのブラウザ（Chrome）で、Webサイトのすべての印刷ページにフッターを印刷
すべてのページにWebページのヘッダー/フッターを印刷する方法はありますか？
HTMLを使用してドキュメントのすべての印刷ページにヘッダーとフッターを印刷する方法
できない場合は、ヘッダー/フッターを繰り返し使用します...次のアイデアは、クローンオブジェクト内の行をカウントし、最大数で分割し、新しいページを作成し（高さを強制）、再びループを開始することです別のdivの別のページ。
私のアプリのポイントは完成した印刷された提案だったので、ヘッダー/フッターソリューションの実行に関する提案を心から感謝します。
わかりました、これについては何も受けていないので、さらに数日間見て回って自分のソリューションを書かないことを選択して、ここに私が見つけたものがあります。
スタックポスト の最下部に、投票もコメントもなしのこの孤独な小さなリンクがありました： http://welcome.totheinter.net/columnizer-jquery-plugin/#comment- 5324
これはすごいことです。コンテンツの広いページを処理し、新聞のように列にフォーマットするように設計されています。改ページを特にうまく処理し、非常に柔軟です。
私の場合、1列（ページの幅）とヘッダーとフッターを繰り返す必要がありました。例10をベースとして使用しました： http://welcome.totheinter.net/autocolumn/sample10.html
プラグインへのリンクを追加し、必要なIDとクラスをページに合わせて変更し、CSSの高さと幅を若干変更し、Google Chromeで繰り返しヘッダーとフッターを使用して複数ページのコンテンツを印刷できました！ （私の会社の優先ブラウザ）
チップ：
CSSのちょっとしたトリックで、コンテンツdivのMIN-HEIGHTを設定して、短いページでフッターを押し下げました。 （ユーザーにポートレートまたはランドスケープのオプションを持たせたい場合は、これを行わないでください）。最終版が修正されたので、これは私にとって素晴らしいことでした。
コンテンツのさまざまな高さをテストして、コンテンツがどのように破損するかを確認しました。毎回スムーズでした。
私は最後の例をJsBinとFiddleに投稿しようとしましたが、毎回エラーが発生しました。
繰り返しになりますが、上記の例10は、前後に示すように開始するのに最適な場所です。
ここに、可変高コンテンツと繰り返しヘッダーとフッターを使用した最終版があります：（これは、Chrome）でブラウザーの[印刷リンク/ボタン]をクリックしたときのビューです） 
UPDATE 7/2014：もう一度Chromeは印刷の問題の存在の悩みです。以下のコメントを見ました私が提供したリンクについて、彼は正しい、それは正しくレンダリングされますが、印刷ビューは正しくありません。それについて申し訳ありませんが、それは設定を学ぶために試す良い例です。
私はまだこのソリューションを使用していますが、それでも動作しますが、ボディコンテンツのサイズに合わせてCSSとJS変数を調整する必要があります。サイズの組み合わせは非常に敏感ですが、ページの高さ/幅を適切にし、コンテンツのサイズを適切にすると、機能します。用紙サイズのリーガル/レター用に個別の関数を作成する必要がありました。それは制限されていますが、私たちの目的のために機能します。
また、ウィンドウのサイズによっては必ずしも正しく表示されない場合もありますが、最終的なPRINTED製品はヘッダーとフッターを繰り返して期待どおりであったため、ユーザーが出力に気付かないようにまっすぐに印刷するウィンドウを使用しました、しかしchrome印刷レンダリングを見ました。私はこれらのタイプの回避策を嫌いますが、Chromeを使用している私のオフィスの全員にとって、それは必要な悪です。
これはあなたの質問に対する直接的な答えではないかもしれませんが、問題に対する直接的な解決策かもしれません。
この問題を解決する方法に数日と数週間を費やした後、ヘッダー/フッターの繰り返しでの直接的なhtml/css印刷の使用をやめました。私は多くのコードとサンプルを見てきましたが、それらのすべてが私のニーズを正確に満たしていません。常に不足しているか、わずかに正しく印刷されていません。
私が受け入れられる解決策は、単純なhtml、単純なcssを組み合わせて、これをpdfに変換することです。 html構造とcssがどれほど単純であるかは驚くでしょう。
このソリューションは完全に私のものではなく、上記のコードとwkhtmltopdfライブラリの組み合わせです。これは非常に簡単にインストールできます。これはWindows（MSVC 2013）バージョン0.12.2.1を使用したものです。xamppをWindows 7 64ビットとしてスタックしています。 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-これらはオプションのパラメーターの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>[1]：
この質問に対する答えは、ドキュメントの構造によって異なります。一連の短い壊れないセクションとして構造化できる場合は、幸運！このタイプのドキュメントで実行中のページヘッダーをシミュレートする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>
ページの約3分の1を超えるテキストブロックがあるドキュメントではこの手法を使用したくないでしょうが、フォームやテーブルなどの小さな個別のセクションで構成されるドキュメントには最適です。
この他の投稿 に対する私の答えも興味深いかもしれません。同じ基本原則を使用してChrome互換の繰り返しテーブルヘッダーを作成する方法を示しますが、すべての余分なマークアップはjavascriptによって追加されるため、元のHTMLドキュメントを「汚染」することはありません。
printThis を使用して問題を解決します。印刷領域IDまたはクラス名を指定する必要があります。
残念ながら、これは既知のWebkitのバグです（ChromeおよびSafari）- こちらを参照 。私は何度も回避策を見つけようとしましたが、運はありません。
accepted answer にリンクされている例は、ブラウザから印刷すると機能しないようです。