15

テレビのスケジュールを作成していますが、少なくとも1つの標準ブラウザで印刷の問題は発生しないはずです。

ロゴとタイトルに加えてテーブルヘッダーをすべてのページに配置する必要があります。何日も試して検索した後、この既知のバグposition: fixedのためにChromeがすべてのページにテーブルヘッダーと要素を印刷しないことがわかりました。

よく使用する背景色の印刷-webkit-print-color-adjust: exactやCSS@pageプロパティでページの境界線を変更するなどの機能のため、Google Chromeを使用するようにビューをカスタマイズしましたが、探しているヘッダーを印刷できないことがわかりました。代替案は次のとおりです。

  • Chromeを忘れて、背景色を印刷し、ページの余白を変更するために微調整を行う必要がある別のブラウザの印刷ビューの作成を開始するには（それは不可能だと思います）。
  • すべてのページにテーブルヘッダーを印刷するようにGoogleChromeを作成するCSS/JSソリューションを見つける。

TL; DR： jQuery / JavaScript/etcを知っていますか。Chromeのすべてのページにテーブルヘッダーを印刷するコード？

4

3 に答える 3

13

はい、それはWebkit/Chromeのことです。各ページにtheadは印刷されません。たとえばFFはそうです。このようなことを実現するためにできることは、ページ分割を使用することです。

ページ分割はブロック要素でのみ機能するため、それに応じてtrのスタイルを設定する必要があります。

このような：

tr{
    display:block;
}

ここで、theadのコピーを開始し、javascriptを使用してすべてのX行に配置する必要があります。

var head = $('table thead tr');
$( "tbody tr:nth-child(10n+10)" ).after(head.clone());

画面上では、これらすべての頭が必要なわけではありません。これをメディアクエリで削除します（便宜上、th> tr行に.headクラスを追加しました。：

@media screen {
    tbody .head{
        display: none;
    }
}

各.headの前に、ページを分割します。

tbody tr.head {
    page-break-before: always;
    page-break-inside: avoid;
}

http://jsfiddle.net/jaap/7ZGVv/2/ jsfiddle ではプレビューフレームだけを開くことができないため、ここでは印刷が機能せず、すべてを独自のファイルに結合して、テーブルが分割され、スタイルが完璧ではなく、分割する場所をブラウザ自体が決定するほど柔軟ではありませんが、それは何かです。

于 2013-10-03T22:25:37.087 に答える
2

この問題を解決し、強制的なページ分割（本質的に信頼性が低く、紙を無駄にする傾向がある手法）で自然なページ分割を先取りする必要がない解決策をここに投稿しました。

于 2014-09-09T18:57:46.137 に答える
1

このソリューションは、テーブルヘッダーに対して正確に機能するわけではありませんが、任意のhtmlのヘッダーを許可します。Chromeがヘッダーとフッターを印刷できるようにするライブラリを作成しました。この回答を参照してください。

于 2015-12-23T23:07:00.353 に答える