window.print()からヘッダとフッタを取り除く

window.print()を使ってページを印刷しているのですが、ヘッダとフッタにページタイトル、ファイルパス、ページ番号、日付が含まれています。これらを削除する方法を教えてください。

プリントスタイルシートも試してみました。

#header, #nav, .noprint
{
display: none;
}

助けてください。ありがとうございます。

jprofitt
編集された質問 22日 11月 2011 в 2:08
プログラミング
printing css
22日 11月 2011 в 2:05
33 ビュー
質問へのコメント (1)

Chromeでは、以下の方法でこの自動ヘッダー/フッターを隠すことができます。

@page { margin: 0; }

コンテンツはページの限界まで拡張されるので、ページ印刷用のヘッダー/フッターは表示されません。もちろん、この場合は、コンテンツがページの端まではみ出さないように、body要素にマージンやパディングを設定する必要があります。一般的なプリンタではマージンなしの印刷はできませんし、おそらくあなたが望むものではないので、次のようなものを使用してください。

@media print {
  @page { margin: 0; }
  body { margin: 1.6cm; }
}

Martin]1がコメントで指摘したように、ページが1ページを越えてスクロールするような長い要素（大きなテーブルなど）がある場合、マージンは無視され、印刷版は奇妙に見えるでしょう。

この回答を作成した時点（2013年5月）では、Chromeでしか動作しませんでしたが、現在はどうかわかりません。hableに対応していないブラウザへの対応が必要な場合は、その場でPDFを作成して印刷することもできますが（JavaScriptを埋め込んだセルフプリントのPDFを作成することもできます）、非常に手間がかかります。

isherwood
編集した答え 31日 1月 2019 в 4:12
解説 (6)

Firefox :

  • moznomarginboxes` 属性を `` に追加する。

例題 :

解説 (2)

このコードをcssファイルに追加することで問題が解決すると思います。


    @page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

この件についてもっと知りたい方はこちらをご覧ください.

解説 (2)

今日、私の同僚は同じ問題に出くわしました。

ただし、「margin:0」ソリューションはクロムベースのブラウザーで動作するため、@ページのマージンがゼロに設定されていても、 Internet Explorer は引き続きフッターを印刷します。

解決策(ハックの詳細)は、@ページに負のマージンを置くことでした。

@page {margin:0 -6cm}
html {margin:0 6cm}

負のマージンはY軸では機能せず、Xでのみ機能することに注意してください。

それが役立つことを願っています。

解説 (0)

CSS標準は、いくつかの高度なフォーマットを可能にします。 CSSには@pageディレクティブがあり、ページメディア(紙など)にのみ適用される一部のフォーマットを可能にします。 http://www.w3.org/TR/1998/REC-CSS2-19980512/page.htmlを参照してください。 。



    Print Test

        @page 
        {
            size: auto;   /* auto is the current printer page size */
            margin: 0mm;  /* this affects the margin in the printer settings */
        }

        body 
        {
            background-color:#FFFFFF; 
            border: solid 1px black ;
            margin: 0px;  /* the margin on the content before printing */
       }



  <div>Top line</div>
  <div>Line 2</div>

。

firefoxの場合はそれを使用します。

Firefoxでは、https://bug743252.bugzilla.mozilla.org/attachment.cgi?id = 714383(ページのソースを表示::タグHTML)。

コードで、 < html>を < html moznomarginboxes mozdisallowselectionprint>に置き換えます。 。

Hossein Ghaem
編集した答え 11日 1月 2016 в 1:56
解説 (0)

@media print {。
    .footer、。
    #印刷不可{。
        表示:なし。 !重要;。
    }。
    #印刷可能{。
        表示:ブロック;。
    }。
}。
``。
Nick Reed
編集した答え 7日 10月 2019 в 11:38
解説 (1)

これが最も簡単なソリューションです。 私はインターネットでほとんどのソリューションを試しましたが、これだけが私を助けました。

@print{
    @page :footer {color: #fff }
    @page :header {color: #fff}
}
解説 (1)

手動で印刷したhtmlページのヘッダーとフッターを削除しようとしていました。

このページの解決策は私にはうまくいきませんでしたが、説明されているように自分のフッターを定義するだけですここFirefoxは独自のヘッダーを追加しません。

残念ながら、これはChromeでは機能しません。

CSS: 。 @media画面{。 div.divFooter {。 表示:なし;。 }。 }。 @media print {。 div.divFooter {。 位置:固定;。 下:0;。 }。 }。 。 これをHTMLに追加します。 ``。

< div class = "divFooter">。

UNCLASSIFIED< / p>。 < / div>。 `。

解説 (0)

コードを書く必要はありません。 window.print()を呼び出す直前に、ブラウザの印刷設定を初めて変更します。 たとえばfirefoxでは:

1。 AltまたはF10を押して、メニューバーを表示します。 2。 [ファイル]、[ページの設定]の順にクリックします。 3。 タブを選択します。ヘッダー/フッター。 4。 空白のURLを変更->。 画像。

IEのもう1つの例(以前のバージョンではIE 11を使用していますが、すべてのページでURLを印刷するFirefoxまたはInternet Explorerを防ぐ):

1。 AltまたはF10を押して、メニューバーを表示します。 2。 [ファイル]、[ページの設定]の順にクリックします。 3。 ヘッダーとフッターのセクションで、URLを空に変更します。

alireza azami
編集した答え 27日 9月 2016 в 12:17
解説 (4)

1。 Chromeの場合IE 。

<script language="javascript">
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.getElementById('header').style.display = 'none';
document.getElementById('footer').style.display = 'none';
document.body.innerHTML = printContents;

window.print();

document.body.innerHTML = originalContents;
}

</script>
<div id="div_print">
<div id="header" style="background-color:White;"></div>
<div id="footer" style="background-color:White;"></div>
</div>

2。 l2aelbaが言ったようにFireFoxの場合、。

< html>にmoznomarginboxes属性を追加します。 例:
解説 (1)

ここまでスクロールすると、Firefoxのソリューションが見つかりました。 フッターやヘッダーなしで特定のdivからコンテンツを印刷します。 好きなようにカスタマイズできます。

まず、このアドオンをダウンロードしてインストールします:JSPrintSetup。

次に、この関数を書きます。

<script>
function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');
    mywindow.document.write('' + document.title  + '');
    mywindow.document.write('');
    mywindow.document.write(elem);
    mywindow.document.write('');
    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

   //jsPrintSetup.setPrinter('PDFCreator'); //set the printer if you wish
   jsPrintSetup.setSilentPrint(1);

   //sent empty page header
   jsPrintSetup.setOption('headerStrLeft', '');
   jsPrintSetup.setOption('headerStrCenter', '');
   jsPrintSetup.setOption('headerStrRight', '');

   // set empty page footer
   jsPrintSetup.setOption('footerStrLeft', '');
   jsPrintSetup.setOption('footerStrCenter', '');
   jsPrintSetup.setOption('footerStrRight', '');

   // print my window silently. 
   jsPrintSetup.printWindow(mywindow);
   jsPrintSetup.setSilentPrint(1); //change to 0 if you want print dialog

    mywindow.close();

    return true;
}
</script>

第三に、あなたのコードでは、印刷コードを書きたいところならどこでも、これを行います(私はJQueryを使用しました。 プレーンJavaScriptを使用できます):

<script>
$("#print").click(function () {
    var contents = $("#yourDivToPrint").html();
    PrintElem(contents);
})
</script>

明らかに、クリックするにはリンクが必要です。

<a href="#" id="print">Print my Div</a>

そして、あなたのdivを印刷します。

<div id="yourDivToPrint">....</div>
解説 (0)