web-dev-qa-db-ja.com

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

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

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

ご注意ください：

一部のブラウザーがこれを提供し、他のブラウザーが提供しない場合（または一部のブラウザーでそれを行う方法しかわからない場合）、ブラウザー固有のソリューションを歓迎します。

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

最後に、「デフォルトの印刷設​​定を変更する」と言うとき、私は自分のページだけではなく、印刷マージン、ヘッダー、およびフッターに特に言及しています。

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

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

javascripthtmlcssbrowserprinting
172
Anthony

CSS標準では、いくつかの高度な書式設定が可能です。 CSSには、ページ化されたメディア（紙など）にのみ適用されるフォーマットを有効にする@pageディレクティブがあります。 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>

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

これはFirefox 3.6、IE 7、Safari 5.1.7またはGoogle Chrome 4.1。

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

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

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

  • Firefox新しいバージョンでは、positionedですが、ヘッダー/フッターテキストとコンテンツテキストの両方がが表示されるため、ブラウザのヘッダーテキストとページコンテンツがうまく混ざっていないように見えます。

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

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

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

188
awe

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

これを無効にするために、ページマージンをテキストを含めるには小さすぎるサイズに設定できます（ awe の答えからの引用）：

@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>

Firefoxのバージョンの場合 最大 48 alpha 1

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

Firefox 29以降で動作しています。 違いのスクリーンショットを見ることができます 、または 実際の例はこちらをご覧ください

例のmozDisallowSelectionPrint属性は、マージンからテキストを削除するためにnotが必要であることに注意してください。 PDF.jsのmozdisallowselectionprint属性は何をしますか？を参照してください。

他のブラウザ

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

Safariについても同じことが言えます。 @ Luiz Perez のコメントによれば、Safariの最新バージョン（8、9.1、および10）は、マージンテキストを抑制する_@pageをまだサポートしていません。

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

85
user2428118

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

これがheadタグ内にあることを確認してください：

<head>
<style type="text/css" 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>
20
Works

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

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

CSSがMedia = Printをサポートする場合、エンドユーザーの印刷エクスペリエンス全体を制御する機能をサポートする必要があります。ブラウザーが追加フィールドを提供することを感謝しますが、CSSが全体的な印刷エクスペリエンスを制御できるようにしないでください（それが望ましい場合）。 90％のソリューションは、さらに3つのフィールドで100％になる可能性があります！シンプルな：

#BrowserPrintDefaults{display:none}

十分でしょう。

繰り返しますが、エンドユーザーがそれを印刷したいかどうかは問題ではありません（クライアントが非常にプライベートで、印刷されたURLが浮かんでいないかもしれません。エンドユーザーを守ることを喜んでいますが、誰かが答えを探している場合は、エンドユーザーが表示または非表示にする権利があると答えないでください。クライアントが請求書を支払う権利がある場合もあります。

16
CAL

プリンターの設定、マージン、またはその他のブラウザー設定を、CSSまたはJavaScriptから一時的または永続的に変更する方法はありません。

これは本物の要件には残念ですが、これらの制限は、Webユーザーの95％以上がブラウザでJavaScriptを有効にしておく理由です。 （ ブラウザ統計 ）

6
Daniel Vassallo

このコードを試してください、私のために100％動作します：
FORLandscape：

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

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

</style>
</head>

FORPortait：

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

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

</style>
</head>
5
Iyes boy

Internet Explorerを使用している場合、「ブラウザ内」とFirefoxについて言及したので、レジストリの値を一時的に設定することでページヘッダー/フッターを無効にできます。例については here を参照してください。私の知る限り、他のブラウザでこれを行う方法は聞いていません。 DanielとMickelの両方の答えは互いに衝突しているようで、レジストリのどこかに同様の設定があり、Firefoxがヘッダー/フッターを削除したり、カスタマイズしたりできるようになっていると思います。チェックアウトしましたか？

これがお役に立てば幸いです、おめでとう、トム。

0
t0mm13b

これは私のために約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 */
}
0
afshin

Firefox 19.0a2（2012-12-07）で@page margin：0mmが機能するようになりました。

0
thinsoldier

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

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