ページからブラウザの印刷オプション(ヘッダー、フッター、マージン)を無効にしますか?


182

この質問がSOおよび他のいくつかのWebサイトでいくつかの異なる方法で質問されるのを見ましたが、それらのほとんどは具体的すぎるか、古くなっています。私は誰かが推測に迷うことなくここで決定的な答えを提供できることを望んでいます。

CSSまたはJavaScriptのいずれかを使用して、誰かがブラウザー内で印刷するときにデフォルトのプリンター設定を変更する方法はありますか?そしてもちろん、「ブラウザからの印刷物」とは、PDFや他のプラグインに依存するMIMEタイプではなく、何らかの形式のHTMLを意味します。

ご注意ください:

一部のブラウザーがこれを提供し、他のブラウザーが提供しない場合(または一部のブラウザーでその方法を知っているだけの場合)、ブラウザー固有のソリューションを歓迎します。

同様に、これを行うことに対して特定の制限がある主流のブラウザーを知っている場合は、それも役立ちますが、かなり最新のドキュメントをいただければ幸いです。(単に「XYZのセキュリティポリシーに反する」と言っても、XYZが過去3年間にこのポリシーに大幅な変更を加えた場合、あまり説得力がありません)。

最後に、「デフォルトの印刷設​​定を変更する」と言ったとき、私は自分のページだけを意味するわけではありません。特に、印刷の余白、ヘッダー、およびフッターについて言及しています。

CSSには、ページの向きとページのマージンを変更するオプションがあることをよく知っています。多くの闘争の1つはFirefoxです。ページの余白を1インチに設定すると、既に配置されている1/2インチに追加されます。

私はクライアントのサイトでPDFの使用を減らしたいと思っていますが、プレゼンテーションの侵害(および信頼性の欠如)が主な懸念事項です。


そうしたい理由は何かありますか?要件を言った場合、おそらく別の解決策が考えられます...私にとってユーザー設定の変更は良い解決策のようには見えません...
Nivas

1
同意する。ユーザー設定を変更したくない。ブラウザのデフォルト設定を上書きしたい。そして、その理由は、CSSを使用して他のすべてをプリンター対応にすることができる場合には不要と思われるPDFを使用することです。
Anthony、

解決策として回答を確認したようですが、Chromeでのみ機能します。正しいソリューションのクロスブラウザーを取得できましたか?または、少なくともいくつかのブラウザでは?同じ問題があるため
mavili

@mavili クロスブラウザソリューションについては、stackoverflow.com / a / 23778125/453605を参照してください。
Marcello Nuccio

回答:


200

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

欠点は、異なるブラウザーでの動作に一貫性がないことです。Safariはまだプリンターページのマージンの設定をまったくサポートしていませんが、他のすべての主要なブラウザーがサポートしています。

では@pageディレクティブは、(HTML要素の通常のCSSマージンと同じではありません)ページのプリンタマージンを指定することができます。

<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 initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

ヘッダーとフッターを削除する効果を得るために、ここでは基本的にページ固有のマージンを無効にしているため、本文に設定したマージンは改ページで使用されないことに注意してください(Konradによるコメント)これは機能するだけです。印刷されたコンテンツが1ページのみの場合は適切に。

これは、Firefox 3.6IE 7Safari 5.1.7、またはGoogle Chrome 4.1 では機能しません。

@pageマージンの設定は、IE 8Opera 10Google Chrome 21およびFirefox 19で有効です。
これらのブラウザーのコンテンツのページ余白は正しく設定されていますが、ヘッダー/フッターの非表示を解決しようとする場合、この動作は理想的ではありません。

これは、さまざまなブラウザでの動作です。

  • Internet Explorer、マージンは、実際には、この印刷の設定に0ミリメートルに設定されている、とあなたがプレビューを行う場合は、デフォルトとして0ミリメートルを取得しますが、ユーザがプレビューでそれを変更することができます。
    ページコンテンツが実際に正しく配置されていることがわかりますが、ブラウザーの印刷ヘッダーとフッターは透明でない背景で表示されているため、その位置でページコンテンツを効果的に非表示にしています。

  • Firefoxの新しいバージョン、それがされて配置され、正しく、それは悪い、ブラウザのヘッダーテキストのミックスとあなたのページのコンテンツのように見えるように、ヘッダー/フッターのテキストやコンテンツのテキストの両方が表示されます。

  • オペラコンテンツと標準CSSとヘッダ/フッタ位置競合に不透明な背景を使用する場合、ページコンテンツは、ヘッダーを非表示にします。かなり良いですが、マージンが小さい値に設定されていて、ヘッダーが部分的に表示されていると、奇妙に見えます。また、ページ余白が正しく設定されていません。

  • クロム @pageマージンがコンテンツとヘッダ/フッタ位置競合ほど小さく設定されている場合、より新しいバージョン、ブラウザのヘッダーとフッターが隠されています。私の意見では、これはまさにこれがどのように振る舞うべきかです。

したがって、結論は、ヘッダー/フッターを非表示にすることに関して、Chromeがこれを最も適切に実装しているということです。


1
明確にするために、これはFirefox 21またはIE10でヘッダーを削除するようには見えませんが、ヘッダー/フッターがスペースを占有しない原因となったと思います。これは、クロム28で仕事をする
amh15

2
新しいブラウザのバージョンを反映するように更新しました。現在、Chromeはこれを最適に実装しています。
2018

@SearchForKnowledge:はい、それは私が言ったとおりです-IEでの動作についての説明の下で私の回答を読んだ場合:「ページのコンテンツは実際には正しく配置されていますが、ブラウザーの印刷ヘッダーとフッターがページを隠しています。その位置のコンテンツ。」IE 8では「効果がある」と言っていますが、期待どおりに機能するわけではありません...回答を編集してこれを明確にします。
畏敬の念2014

ヘッダーを削除しますが、左揃えも削除します。つまり、私のテキストはすべてページの端にあります。
Mittchel

7
マージンとマージンは根本的に異なるものであるため、このソリューションはまったく機能ません。マージンは本文全体、つまり最初のページの上部と最後のページの下部にのみ適用されます。すべての中間ページで、上部/下部のマージンはゼロのままです。@pagebodybody
Konrad Rudolph

86

ChromeとOperaの最新バージョン、およびFirefox 48 alpha 1以降

これを無効にするには、ページのマージンを小さすぎてテキストを含めることができないサイズに設定します(畏怖の答えから借ります)。

@page {
  size: auto;  /* auto is the initial value */
  margin: 0mm; /* this affects the margin in the printer settings */
}
html {
  background-color: #FFFFFF;
  margin: 0px; /* this affects the margin on the HTML before sending to printer */
}
body {
  border: solid 1px blue;
  margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}
<ol>
  <li>
    <a href="data:,No Javascript :-(" target="_blank">Middle-click to open in new tab</a>
  </li>
  <li>
    <a href="javascript:print()">Print</a>
  </li>
</ol><!-- Hack to work around stack snippet restrictions --><script type=application/javascript>document.links[0].href="data:text/html;charset=utf-8,"+encodeURIComponent('<!doctype html>'+document.documentElement.outerHTML)</script>

48アルファ1 までのバージョンのFirefox

タグにmozNoMarginBoxes属性を追加して<html>、URL、ページ番号など、Firefoxがページ余白に追加するものが印刷されないようにすることができます。

Firefox 29以降で動作します。ここ違いのスクリーンショットを見ることができます。または、ライブの例についてはここを参照してください。

mozDisallowSelectionPrintこの例の属性は、余白からテキストを削除するために必須ではないことに注意してください。PDF.jsのmozdisallowselectionprint属性の機能を参照してください。

その他のブラウザ

残念ながら、Internet Explorerでこの問題を解決する方法はないようです。そのため、PDFを使用するか、ユーザーにマージンテキストを無効にするよう依頼する必要があります。

Safariについても同様です。@Luiz Perezのコメントによると、Safariの最新バージョン(8、9.1、および10)では、@pageマージンテキストの抑制はまだサポートされていません 。

Edgeで何も見つからず、テストできるWindows 10インストールがありません。


5
正直なところ、私はこれに同意します。「システムダイアログ」を使用して印刷すると、Chromeでも機能します。それ<!DOCTYPE html> <html moznomarginboxes mozdisallowselectionprint>が設定されていることを確認してください。出典:https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383
Peter

3
Firefoxでうまく動作します。@page{ size: auto; margin: 3mm; } クロムとサファリをサポートするために、これ は私のためにクロスブラウザソリューションを実行しました。
Clain Dsilva、2015年

このソリューションは、FFの印刷物から不要な情報/コンテンツを削除するのに非常に適しています。ありがとう!
Varvara Jones、2015

これはすばらしいですが、IEはどうでしょうか。
Santosh

1
私はこのスニペットをSafari 8、9.1、および10でテストしましたが、Safariのこれらのバージョンのヘッダーまたはフッターは削除されません。
Luis Perez

21

@Aweが上記で述べたように、これはChromeで動作することが確認されている解決策です!!

これがヘッドタグ内にあることを確認してください:

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

    body 
    {
        background-color:#FFFFFF; 
        border: solid 1px black ;
        margin: 0px;  /* this affects the margin on the content before sending to printer */
   }
</style>
</head>

3
これは非常に良い解決策です!マージンを削除し、ヘッダーとフッターを削除します。私の唯一の変更はpadding: 0.25in 0.5in;、ボディスタイルに追加して、きれいできれいな印刷に必要な正確なマージンを確保することでした。Chrome v25での作業、そしてありがたいことに、この特定のプロジェクトについては、エンドユーザーにいくつかの最新のブラウザーから選択するように依頼できます。
チャーリーシュリーサー、2013

2
残念ながら、これは複数ページのプリントアウトで問題を引き起こします。ページ下部のテキストが切り取られます。
ジョナサン

単一ページ出力のChrome 67.0.3396.99およびFirefox 62.0b5で完全に動作します。
killscreen

16

ヘッダー、ページ番号、HTMLフッターを削除したいクライアントから同様のリクエストがあります。この場合、クライアントは正式な証明書としても機能するHTMLページを提示しています。追加されたURL、ページ、およびヘッダーは無関係であり、満足のいく最終製品にはなりません。ある意味では、安っぽく見えるだけです。

Media = Printは、これらのブラウザのデフォルトを無効にすることができませんでした。唯一の回避策は、「ギア」ボタンをクリックしてそれらのアイテムのオン/オフを切り替えるようにユーザーに指示することです。真剣に、私はそれを20年間行うことができるとは思いもしませんでした(そして、一般的なユーザーはトグルボタンをクリックする手がかりを持っていると思いますか?)。

CSSがMedia = Printをサポートする場合は、エンドユーザーの印刷エクスペリエンス全体を制御する機能をサポートする必要があります。ブラウザが追加フィールドを提供することを感謝しますが、CSSが全体的な印刷エクスペリエンスを制御することを許可しないのはなぜですか?3つのフィールドを追加すると、90%のソリューションは100%になります。シンプルな:

#BrowserPrintDefaults{display:none} 

十分でしょう。

繰り返しになりますが、エンドユーザーがそれを印刷したいかどうかは問題ではありません(クライアントが非常に非公開で、印刷されたURLが浮かんでいることを望んでいない可能性があります。または、経営陣が私的なコラボレーションサイトを使用している可能性があります)。エンドユーザーを擁護してうれしいですが、誰かが答えを求めている場合は、エンドユーザーが表示または非表示にする権利であると答えないでください。時々それは顧客が手形を支払う権利である。


最終的には、私が望んでいないほど断念しました。すべてのブラウザーにこれらの設定があり、プレゼンテーション要素であるため、CSSで公開する必要があることは間違いありません。しかし、これはCookieをオフにするなど、アプリケーションレベルの設定としてのシーンです。
Anthony

1
これは、@Pageディレクティブを使用してプリンターのマージンを設定する公式のCSS標準です(これは、htmlページの本文のマージンとは異なります)。現在、これはSafariを除くすべての主要なブラウザーでサポートされていますが、ヘッダー/フッターへの影響はさまざまです。最適な実装はOperaとChromeです。
2013

6

このコードを試してください、100%動作します:
横向き

<head>
<style type="text/css">

@page{
  size: auto A4 landscape;
  margin: 3mm;
}

</style>
</head>

FOR 撮り:

<head>
<style type="text/css">

@page{
  size: auto;
  margin: 3mm;
}

</style>
</head>

1
CSSページルールはマージンを設定しますが、ブラウザーによって配置された組み込みヘッダーとフッター(ページURL、ページ番号など)を削除しません
Anthony

0

「ブラウザ内」とFirefoxについて説明したので、Internet Explorerを使用している場合は、レジストリの値を一時的に設定してページのヘッダー/フッターを無効にできます。例については、こちらを参照してください。私の知る限り、私は他のブラウザでこれを行う方法について聞いたことがありません。DanielとMickelの両方の回答が互いに衝突しているようです。Firefoxのヘッダー/フッターを削除したりカスタマイズしたりするために、レジストリのどこかに同様の設定がある可能性があります。確認しましたか?

よろしくお願いします、トム。


1
IE7 +では、印刷プレビューでボタンをクリックするだけでヘッダー/フッターを無効にできます。レジストリで行う必要はありません!
畏敬の念


0

一部のCSSを使用して問題をWebページに解決しました。

<style media="print">
   @page {
      size: auto;
      margin: 0;
  }
</style>

0

これは私にとって約1cmのマージンでうまくいきました

@page 
{
    size:  auto;   /* auto is the initial value */
    margin: 0mm;  /* this affects the margin in the printer settings */
}
html
{
    background-color: #FFFFFF; 
    margin: 0mm;  /* this affects the margin on the html before sending to printer */
}
body
{
    padding:30px; /* margin you want for the content */
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.