web-dev-qa-db-ja.com

Googleのすべてのページのヘッダーを印刷するChrome

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

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

頻繁に使用した-webkit-print-color-adjust: exactを使用した背景色の印刷や、CSS @pageプロパティを使用したページの境界線の変更などの機能のため、Google Chromeを使用するようにビューをカスタマイズしましたが、それは私が探しているヘッダーを印刷できません：

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

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

cssgoogle-chromeprinting
15
Farid Rn

はい、それは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ではプレビューフレームのみを開くことができないため、ここでは印刷が機能しません。すべてを独自のファイルに結合すると、テーブルが分割され、スタイル設定が完璧ではなく、ブラウザ自体が分割する場所を決定するほど柔軟ではありませんが、それは何かです。

12
Jaap

私は ここに解決策を投稿しました この問題を解決し、強制的な改ページで自然な改ページを回避しようとする必要がありません（本質的に信頼性が低く、紙を浪費する傾向がある手法）。

2
DoctorDestructo

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

1
lastmjs