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

109

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

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

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

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

css  printing 
— ビラルク
ソース
7
これらの要素は、ユーザーのブラウザー設定に固有です。CSSやJavaScriptでそれらを削除できるとは思いません。
— Michael Berkowski
この質問には説明が必要だと思います。画面に表示されているHTMLのヘッダー要素とフッター要素を削除しようとしているか、印刷機能によって追加されたヘッダーとフッターを削除しますか？
— AlanObject

回答:

149

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

@page { margin: 0; }

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

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

以下のようマーティンはコメントで指摘ページが長い要素（大きなテーブルのような）1ページ過去のスクロールことを持っている場合、マージンは無視され、印刷されたバージョンが奇妙になります。

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

— ディエゴ・ヌネス
ソース
2
何らかの理由で、body { margin: 1.6cm; }は適切なマージンを無視していたため（おそらくを使用していたためtext-align:right）、代わりに<div class="container">コンテンツ用にを作成し、代わりに使用し.container { margin: 1.6cm; }ました。
— rybo111 2013
8
私はChrome 33でこれを試しています。これはうまく機能しますが、注意してください。これbody { margin: 1.6cm; }は、ドキュメント全体のマージンであるため、最初と最後を除いて、マルチページドキュメントの垂直マージンを尊重しないためです。悲しいことに、私は回避策を考えることができません。
— pau.moreno 14
@Diegoさん、私はあなたの提案に満足しています。ヘッダーフッターは削除されましたが、印刷ページが増えていました。「body {margin：1.6cm;}」を1.6cmから1.0cmに変更するだけで動作します。:) Happy codding
— Vishal Kiri
3
より広範な答えがここにあります：stackoverflow.com/questions/1960939/...
— jedison
ページ余白を削除して本文余白を追加すると、空のページが生成されました。ボディマージンをパディングに変更しましたが、うまくいきました。
— アンドレ・ギマランイス酒田
21

私はあなたの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>

あなたはこれを訪問してこれについてもっと知ることができます

— ルディアス
ソース
3
いいえ、機能しません。それだけのマージンを設定しています。ヘッダーとフッターにまだURLと日付時刻が表示されている
— 学習者
ChromeおよびFirefoxで動作しますが、IE 11では動作しません
— Sammi
21

Firefox：

  • moznomarginboxes属性を追加<html>

例：

<html moznomarginboxes mozdisallowselectionprint>
— l2aelba
ソース
6
Firefox 48がリリースされた後（2016年8月）、これは機能しなくなります：bugzilla.mozilla.org/show_bug.cgi
— id
FF 61では機能しませんが、@ page {margin：0; }ソリューションはFFでも機能するようです。
— Kiko
11

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

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

解決策（ハックの詳細）は、@ページにマイナスのマージンを設けることでした。

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

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

それが役に立てば幸い。

— ニック・パノフ
ソース
8

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 = 714383（ページのソースを表示::タグHTML）。

あなたのコードでは、置き換え<html>で<html moznomarginboxes mozdisallowselectionprint>.

— ホセイン・ゲーム
ソース
4 
@media print {
    .footer,
    #non-printable {
        display: none !important;
    }
    #printable {
        display: block;
    }
}
— シーク・アブドゥラ
ソース
これはそれを行う適切な方法のようです。私の場合でも、iframeのコンテキストでは、うまく機能します。
— TwystO 2017年
2

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

@print{
    @page :footer {color: #fff }
    @page :header {color: #fff}
}
— ヤシタ
ソース
11
これは何もしません。
— 夜
1

@page { margin: 0; }ChromeとFirefoxで正常に動作します。CSSを使用してIEを修正する方法が見つかりません。しかし、自分のマシンでIEの[ページ設定]に移動して、マージンを0に設定できます。Altキーを押してから、左上にあるファイルメニューを選択すると、[ページ設定]が表示されます。これは一度に1台のマシンでのみ機能します...

— サミー
ソース
0

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>
— ニキルス
ソース
上記のコードでは、<div id = "header" style = "background-color：White;"> </ div> <div id = "footer" style = "background-color：White;"> </ div>はオプションです。
— Nikhilus
0

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

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

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

CSS：

@media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}

これをHTMLに追加します。

<div class="divFooter">
<p>UNCLASSIFIED</p>
</div>
``
— lwinkler
ソース
-1

ここまで下にスクロールすると、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>

3番目に、コードで、印刷コードを記述したい場所で次のようにします（私は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>
— ヨシヤ
ソース
-3

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

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

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

  1. AltキーまたはF10キーを押してメニューバーを表示します
  2. [ファイル]、[ページ設定]の順にクリックします
  3. [ヘッダーとフッター]セクションで、URLを空に変更します。
— アリレザあざみ
ソース
このリンクで質問に答えることができますが、回答の重要な部分をここに含め、参照用のリンクを提供することをお勧めします。リンクされたページが変更されると、リンクのみの回答が無効になる可能性があります。- レビューから
— SurvivalMachine
提案SurvivalMachineをありがとう。私は数分前に私の回答を編集しました:)
— alireza azami
うーん...私はすべてのユーザーの周りを走り回って、この1つのアプリを考慮に入れるためにブラウザーを更新する必要はありません。また、別のアプリの設定を元に戻す必要がある場合はどうなりますか？これは答えではありません。
— ポール、
このアプローチには、ページ/アプリに組み込まれたフィーチャーが提供するクロスブラウザー機能がありません。
— killscreen
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.