html - HTMLが印刷に表示されない

Question

そのテキストをWebページに表示するが、印刷Webページには表示しないようにする方法。メディアクエリを使用できません。

Answer 1

印刷 css ファイルを定義する必要があります。

http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/をご覧ください。

2 つの異なる css ファイルを含める必要があります (私の好みの方法):

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

Answer 2

テキストを要素内にラップして、クラスを与えることができます。たとえば、テキストにクラスを追加できる要素がまだない場合は、スパンを追加できます。

<span class="printInvisible">This is a text</span>

次に、印刷用の css を定義できます (これにはメディアクエリは必要ありません)。

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

そして、このスタイルシートでクラスを非表示に定義して、次のように非表示にします。

.prinitInvisible {
     visibility: hidden;
}

また

.prinitInvisible {
     display: none;
 }

Answer 3

メディア クエリを使用できないと述べていても、印刷用に別のスタイルシートを作成できる場合があります。

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

JavaScript を使用でき、上記を絶対に使用できない場合は、印刷しないすべてのもの (例: class='no_print') にクラスを追加し、印刷オプションをクリックするときに JavaScript を使用して別のクラスを に割り当て、no_printそれらを非表示にします。

たとえばjQueryで

$('.no_print').addClass('hide');

またはcssで直接行う

$('.no_print').css('visibility','hidden');