CSS：印刷プレビューからヘッダーとフッターを無効にするChrome

Question

私のアプリケーションの1つはWebベースのPOS（Point Of Sale）です。そのため、クロムに請求書を印刷します。 私は、印刷メディアで、こっち一部CSSを適用

ページヘッダと自動的に私がページを経由して、ユーザーの介入なしにSUPRESSしたいブラウザによって挿入されたページフッタ..

@media print { 
#header, #footer { 
    visibility: hidden !important; 
    display: none !important; 
} 
} 

これは適用されません。セレクタが正しくない可能性があります。

また、余白を減らしてみましたが、印刷に複数のページがある場合は、ページコンテンツをカット/オーバーライドします。 もう1つ、印刷プレビューオプションを無効にしたくありませんクロム..

誰もがこれに対して良い解決策を持っていますか？

よろしく..あなたのCSSのスクリプトで

Answer 1

使用

@page{margin:0px auto;} 

。これは印刷時にページレイアウトを捨てる可能性が高いため、＃padder divを適切なパディングとともに追加して、ページを見栄え良くすることができます。 Google Chromeでのみテスト済みです。

Answer 2

。 。私はあなたがどれほど精通しているか分かりませんが、CSSのセレクタはいくつかの要素と一致しなければなりません。 「[印刷]ページ」のような[ページ]「ヘッダー」と「ページ」の「フッター」は、「[web]ページ」のようにはターゲティングできません。 ID、およびおそらく自分のページIDと衝突する可能性があり、ブラウザベンダーは決して実装することを認めません。

。 。 "margin：0 auto;"を使用することの提案@pageディレクティブは実際には正しいです（ブラウザには表示するのに十分なマージンがないので、それを隠すだけです）。問題は現在のところ、Chromeのみが正しくサポートされていることです。他のブラウザでは、PDFを作成して印刷する以外に良い選択肢はありません。ただし、JavaScriptが埋め込まれた状態で読み込まれるとすぐに印刷ダイアログが表示される、自己印刷可能なPDFを作成することはできますが、私はそれができる限り遠くにあると思います。

。 。がんばろう。