しかし、ウェブ上ですべてを行うという決定には欠点があります（1つでもありませんが、ここではすべてをリストしません）：レポート、レターヘッド、その他の印刷ページの印刷の不便さ。 これは、Webページは主にモニター画面に表示するために計算され、印刷のために解凍されないという事実によるものです。 幸いなことに、これらはすべて一時的な問題であり、回避することができます。 たとえば、pdfまたはdocでレポートを生成できます。 しかし、これはあまり便利ではないと思います：ユーザーはこれらの形式で動作するプログラムをインストールする必要があります。生成されたファイルをサーバーからダウンロードするたびに、ブラウザーではなくサードパーティのプログラムから印刷します。 したがって、ブラウザから直接正しく印刷するページを作成することは価値があります。
画面に表示するページと印刷するページには別々のバージョンがあるため、目的に応じてCSSを2つの部分に分割する必要があります。 画面に表示するための特別な要素のプロパティはブロックに保存されます
メディア画面{}
および印刷用に、それぞれ
メディア印刷{}
最初に行う必要があるのは、不要なグラフィック要素をすべて無効にすることです。バナー（ローカルネットワークのWebアプリケーションに含まれている可能性は低い）、メニューなどです。 これは、CSSの次の構成によって実現されます。
メディア印刷{
.banner {display：none;}
}
他の余分なブロックの表示も禁止しています。 おそらく、逆に、印刷時に一部のブロックを表示し、画面上で非表示にする必要があります。 美しい色のロゴは、おそらく白黒プリンターで汚れているか十分に鮮明ではないため、特別な対照的なものに置き換える価値があります：
メディア画面{
div.logo {background：url（img / logo.png）no-repeat top;}
}
メディア印刷{
div.logo {background：url（img / logo_print.png）no-repeat top;}
}
ほとんどの場合、WebアプリケーションのユーザーはA4プリンターでページを印刷します（このアプリケーションが印刷用でない場合）。 ページ構成を挿入して、 ページを目的のサイズに制限します。 ページサイズを指定できます（ピクセル単位ではなく、センチメートルまたはインチ単位で指定する必要があります！）。したがって、A4の場合は8.5x11インチまたは21x29.7 cmです。
ページ {
サイズ8.5in 11in;
マージン：1cm
}
両面印刷を目的とする場合、左右のページを区別する必要があります。
ページ ：左{
マージン左：4cm;
マージン右：3cm;
}
ページ ：右{
マージン左：3cm;
マージン右：4cm;
}
また、ページ上のすべての要素のサイズは、相対的な単位で設定する必要があります。 フォントを置き換えることは問題ありません。セリフフォントは紙の上で見栄えがよくなります。
複数ページのレポートまたはドキュメントの完成したフォームを印刷する場合、レポートの各部分が必要になるか、各フォームを個別のページに表示する必要があります。 水平線hrを使用して画面に改ページを表示し、その上で印刷するときに改ページを行うと、非常に便利に思えました。
メディア印刷{
hr {PAGE-BREAK-AFTER：常に; 可視性：非表示;}
}
PAGE-BREAK-AFTERを指定すると、このプロパティを持つアイテムが表示された後、次のページから印刷が継続され、印刷前にPAGE-BREAK-BEFOREが強制されます。 私の例では、印刷時にhrは表示されません（可視性：非表示）が、これはプリンターの制御を妨げません。
私のプロジェクトの1つでは、オペレーターはフォームに顧客データを入力する必要があり、その後、このフォームを特別なフォーマットで印刷する必要がありました。 画面に表示するバージョンとフォームの入力フィールドおよび印刷バージョンを組み合わせる1ページに決めました。 これにより、オペレーターのタスクが簡単になります。データを入力して保存した後、特別なページをロードせずに「印刷」ボタンを押すだけで十分です。
これを行うために、空のドキュメントフォームの形式でデータ入力フォームを作成しました。 ちなみに、これは良いアイデアです。フォームはコンパクトで、紙のように見えます。 次に、ドキュメントの2つのバージョンを1ページに収集し、表示プロパティを巧みに操作します。 HTMLの各フィールドは次のようになります（簡略化されています）。
:
/>
このスパンに注意してください-フィールドの値を複製します。 CSSファイルは次のとおりです。
メディア画面{
.field {display：none;}
}
メディア印刷{
入力{表示：なし;}
td {border：1px solid;}
.field {text-decoration：underline;}
}
したがって、画面に表示されると入力フィールドが表示され、印刷されると完成した結果が表示されます。
最後に、私は1つの不快な瞬間について言いたいです。 ブラウザは、ページフィールドとヘッダーを設定します。 これにより、ドキュメントの美しく形成されたフォーム全体が一度に損なわれたり、ページが2つに引き伸ばされたりする可能性があります。 JavaScriptはこの問題を解決しません。 したがって、ブラウザのフィールドとヘッダーを削除するようにユーザーに求める（リマインダーを強調表示する）だけです。