web-dev-qa-db-ja.com

window.print（）からヘッダーとフッターを削除します

ページの印刷にwindow.print（）を使用していますが、ヘッダーとフッターにページタイトル、ファイルパス、ページ番号、日付が含まれています。それらを削除する方法は？

スタイルシートも印刷してみました。

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

助けてください。ありがとう。

cssprinting
92
Viralk

Chromeでは、この自動ヘッダー/フッターを非表示にすることができます

@page { margin: 0; }

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

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

Martin がコメントで指摘したように、ページに1ページを超える長い要素（大きなテーブルなど）がある場合、余白は無視され、印刷されたバージョンは奇妙に見えます。

この回答の最初の時点（2013年5月）では、Chromeでしか機能していませんでした。 hableできないブラウザーのサポートが必要な場合は、PDFをその場で作成して印刷できます（JavaScriptを埋め込む自己印刷PDFを作成できます）。 、しかしそれは大きな面倒です。

120
diego nunes

Firefox：

  • <html>にmoznomarginboxes属性を追加

例：

<html moznomarginboxes mozdisallowselectionprint>
21
l2aelba

このコードをCSSファイルに追加すると問題が解決するはずです

<style type="text/css" media="print">
    @page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }
</style>

これについて詳しく知るには、こちらにアクセスしてください

18
Rudias

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

ただし、「margin：0」ソリューションはクロムベースのブラウザで機能するため、@-page marginsがゼロに設定されていてもInternet Explorerはフッターの印刷を続行します。

解決策（さらにハック）は、@ pageにマイナスのマージンを置くことでした。

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

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

それが役に立てば幸い。

10
Nick Panov

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Print Test</title>
    <style type="text/css" media="print">
        @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 */
       }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

そして、Firefoxのためにそれを使用します

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

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

8
hossein ghaem
@media print {
    .footer,
    #non-printable {
        display: none !important;
    }
    #printable {
        display: block;
    }
}
3
Sheak Abdulla

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

@print{
    @page :footer {color: #fff }
    @page :header {color: #fff}
}
2
Yasitha

この時点までスクロールダウンした場合、Firefoxの解決策を見つけました。フッターとヘッダーなしで特定のdivからコンテンツを印刷します。必要に応じてカスタマイズできます。

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

次に、この関数を記述します。

<script>
function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');
    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write(elem);
    mywindow.document.write('</body></html>');
    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
Josiah

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

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

IEのもう1つの例（以前のバージョンではIE 11を使用していますが、これを見ることができます FirefoxまたはInternet ExplorerがすべてのページにURLを印刷するのを防ぎます =）：

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

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>
  1. l2aelbaが言ったFireFoxの場合、

例にmoznomarginboxes属性を追加します。

<html moznomarginboxes mozdisallowselectionprint>
0
Nikhilus