css - ページの一部だけを印刷するには?

Question

ユーザーがこの巨大なフォームを印刷する前にいくつかの div を非表示にしてから、再度 div を表示しようとしています。したがって、ページの残りの部分を無視して、フォーム自体のみを印刷したいと考えています。

ユーザーが印刷ボタンをクリックすると、別のページを開くことができます。唯一のことは、フォームが非常に長く、それを行うのは非常に面倒だということです.

編集: 私の以前の質問は、私が探していたものを実際には反映していませんでした。ということで、現在のものに変更しました。

また、window.onbeforeprint と window.onafterprint を提案してくれたすべての人に感謝します。それは私の編集された質問に関連していました。

score 28 · Accepted Answer

まず、OK 方法:

window.onbeforeprint と window.onafterprint を見てください (元の質問は、プログラムでそれを行う方法について尋ねられたと思います)。

これを行うより良い方法は、印刷専用のスタイルを使用することです。つまり、div は次のようになります。

<div class="someClass noPrint">My Info</div>

次に、スタイルシートに次のように記述します。

.someClass {font-family:arial;}
@media print {
    .noPrint { display: none; }
}

必要に応じて、これを別のスタイルシートに配置して、スタイルを混在させる必要がないようにすることもできます。

<link rel="stylesheet" type="text/css" media="print" href="print.css">

画面スタイルシートで「.someClass」を 1 つの方法で定義し、印刷スタイルシートでまったく別の方法で定義することができます。

score 17 · Accepted Answer

IE はとをサポートしonbeforeprintてonafterprintいますが、本当に必要なのは印刷スタイルシートです。

<link rel="stylesheet" type="text/css" media="print" href="print.css">

score 0 · Accepted Answer

media="print"を使用して印刷専用のスタイルシートを作成することを検討してください。

score 0 · Accepted Answer

これは実際には CSS media=print スタイルとして実装する必要があります。link 要素の media 属性を使用して、スタイルシートを適用するメディアを選択できます。この記事をチェック