Webページの印刷時に要素を非表示にするにはどうすればよいですか？

Webページを印刷するためのリンクがWebページにあります。ただし、リンクはプリントアウト自体にも表示されます。

印刷リンクをクリックしたときにリンクボタンを非表示にするJavaScriptまたはHTMLコードはありますか？

例：

 "Good Evening"
 Print (click Here To Print)

「Good Evening」というテキストを印刷するときに、この「Print」ラベルを非表示にしたい。「印刷」ラベルは、印刷物自体には表示されません。

スタイルシートに次を追加します。

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

次にclass='no-print'、ボタンなどの印刷されたバージョンに表示したくないHTMLに、HTMLに追加（またはno-printクラスを追加）します。

Bootstrap 3には、これと呼ばれる独自のクラスがあります。

hidden-print

これは次のように定義されています：

@media print {
  .hidden-print {
    display: none !important;
  }
}

自分で定義する必要はありません。

でブートストラップ4本は、に変更されました：

.d-print-none

ベストプラクティスは、印刷専用のスタイルシートを使用し、そのmedia属性をに設定することprintです。

その中で、紙に印刷したい要素を表示/非表示にします。

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

これがこのCSSを置く簡単な解決策です

@media print{
   .noprint{
       display:none;
   }
}

そしてこれがHTMLです

<div class="noprint">
    element that need to be hidden when printing
</div>
<div class="noprint">
    element that need to be hidden when printing
</div>

CSSファイル

@media print
{
    #pager,
    form,
    .no-print
    {
        display: none !important;
        height: 0;
    }


    .no-print, .no-print *{
        display: none !important;
        height: 0;
    }
}

HTMLヘッダー

<link href="/theme/css/ui/ui.print.css?version=x.x.x" media="print" rel="stylesheet" type="text/css" >

素子

<div class="no-print"></div>

リンクを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があります）。

より良い解決策は、印刷スタイルシートを作成し、そのスタイルシート内でprintOptionID（またはそれと呼ぶもの）の非表示ステータスを指定することです。これは、HTMLのヘッドセクションで行い、メディア属性を使用して2番目のスタイルシートを指定できます。

最善の方法は、「印刷専用」バージョンのページを作成することです。

ああ、待って...これはもう1999年ではありません。「display：none」で印刷CSSを使用します。

diodusによって受け入れられた答えは、私たち全員ではないにしても、一部では機能しません。まだこのPrintボタンを紙に印刷しないようにすることはできませんでした。

アドオンによるcssファイルの呼び出しのClint Pachlによる少しの調整

      media="screen, print" 

だけでなく

      media="screen"

この問題を解決しています。そのため、わかりやすくするため、およびClint Pachlがコメントに追加のヘルプを非表示にするのは簡単ではないためです。ユーザーは、希望するフォーマットでcssファイルに "、print"を含める必要があります。

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

デフォルトのメディアではなく、「画面」のみ。

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

私はこの問題を皆のために解決すると思います。

個々の要素のスタイルプロパティを妨害するJavaScriptがある場合は、オーバーライドして!important、イベントonbeforeprintとを処理することをお勧めしますonafterprint。https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint