私のウェブページには、ウェブページを印刷するためのリンクがあります。しかし、そのリンクはプリントアウト自体にも表示されています。
印刷用のリンクをクリックしたときに、リンクボタンを隠すようなjavascriptやHTMLコードはありますか?
例
"Good Evening"
Print (click Here To Print)
この"Print"ラベルを、"Good Evening"というテキストを印刷するときに非表示にしたいのです。印刷物には表示されません。
スタイルシートには
@media print
{
.no-print, .no-print *
{
display: none !important;
}
}
そして、ボタンなど印刷版に表示したくないHTMLには、class='no-print'
を追加してください(または、既存のclass文にno-print classを追加してください)。
ベストプラクティスは、印刷専用のスタイルシートを使用し、そのmedia
属性をprint
に設定することです。
その中で、紙に印刷したい要素の表示/非表示を設定します。
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
リンクをdiv内に配置し、アンカータグにJavaScriptを使用して、クリックされたときにdivを隠すことができます。例(テストしていないので、微調整が必要かもしれませんが、イメージはつかめると思います)。
<div id="printOption">
<a href="javascript:void();"
onclick="document.getElementById('printOption').style.visibility = 'hidden';
document.print();
return true;">
Print
</a>
</div>
欠点は、一度クリックするとボタンが消えてしまい、そのページのオプションがなくなってしまうことです(Ctrl+Pは常にありますが)。
より良い解決策は、印刷スタイルシートを作成し、そのスタイルシート内で printOption
ID (または任意の名称) の非表示状態を指定することです。 これをHTMLのheadセクションで行い、media属性を持つ2つ目のスタイルシートを指定することができます。