web-dev-qa-db-ja.com

Webページを印刷するときに要素を非表示にする方法

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

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

例：

 "Good Evening"
 Print (click Here To Print)

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

cssprinting
385
sourav

スタイルシートに以下を追加してください。

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

それから、あなたのボタンのような、印刷されたバージョンには現れたくないclass='no-print'を（あるいは既存のclassステートメントにno-printクラスを追加して）追加してください。

669
Diodeus - James MacFarlane

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

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

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

ブートストラップ3には its own というクラスがあり、 と呼ばれます。

hidden-print

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

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

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

- Bootstrap 4 /に変更されました。

.d-print-none
140
Bijan

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

<style>
@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>
31
Nesar Nori

CSSファイル

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


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

HTML HEADER

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

素子

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

リンクを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番目のスタイルシートを指定することができます。

7
Justin Scott

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

おお、待って…これはもう1999年じゃない。 "display：none"の印刷CSSを使用してください。

6
Jay R
@media print {
  .no-print {
    visibility: hidden;
  }
}
<div class="no-print">
  Nope
</div>

<div>
  Yup
</div>
5
Mike Rapadas

Diodusによって受け入れられた答えは私たち全員ではないにしても一部の人にとってはうまくいかない。 [このボタンを印刷]ボタンを押しても用紙に表示されないようにすることはできませんでした。

Clint Pachlによるcssファイル呼び出しのちょっとした調整

      media="screen, print"

そしてただ

      media="screen"

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

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

デフォルトのmedia = "screen"のみではありません。

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

私は誰にとってもこの問題を解決すると思います。

3
webs

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

1
Elias Hasle