Disabling browser print options (headers, footers,

2018-12-31 09:56发布

I have seen this question asked in a couple of different ways on SO and several other websites, but most of them are either too specific or out-of-date. I'm hoping someone can provide a definitive answer here without pandering to speculation.

Is there a way, either with CSS or javascript, to change the default printer settings when someone prints within their browser? And of course by "prints from their browser" I mean some form of HTML, not PDF or some other plug-in reliant mime-type.

Please note:

If some browsers offer this and others don't (or if you only know how to do it for some browsers) I welcome browser-specific solutions.

Similarly, if you know of a mainstream browser that has specific restrictions against EVER doing this, that is also helpful, but some fairly up-to-date documentation would be appreciated. (simply saying "that goes against XYZ's security policy" isn't very convincing when XYZ has made significant changes in said policy in the last three years).

Finally, when I say "change default print settings" I don't mean forever, just for my page, and I am referring specifically to print margins, headers, and footers.

I am very aware that CSS offers the option of changing the page orientation as well as the page margins. One of the many struggles is with Firefox. If I set the page margins to 1 inch, it ADDS this to the half inch it already puts into place.

I very much want to reduce the usage of PDFs on my client's site, but the infringement on presentation (as well as the lack of reliability) are their main concern.

9条回答
临风纵饮
2楼-- · 2018-12-31 10:41

@page margin:0mm now works in Firefox 19.0a2 (2012-12-07).

查看更多
只若初见
3楼-- · 2018-12-31 10:42

Any recent version of Chrome and Opera, as well as Firefox 48 alpha 1 and greater

You can set the page margin to a size that's too small to contain the text in order to disable this (borrowing from awe's answer):

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

For versions of Firefox up to 48 alpha 1

You can add a mozNoMarginBoxes attribute to the <html> tag to prevent the URL, page numbers and other things Firefox adds to the page margin from being printed.

It is working in Firefox 29 and onwards. You can see a screen shot of the difference here, or see here for a live example.

Note that the mozDisallowSelectionPrint attribute in the example is not required to remove the text from the margins; see What does the mozdisallowselectionprint attribute in PDF.js do?.

Other browsers

Unfortunately, there seems to be no way to resolve this problem in Internet Explorer, so you'll have to resort to PDF or ask users to disable margin texts.

The same goes for Safari; according to a comment by @Luiz Perez, the most recent versions of Safari (8, 9.1 and 10) still do not support @page for suppressing margin texts.

I can't find anything on Edge and I don't have a Windows 10 installation available to test.

查看更多
十年一品温如言
4楼-- · 2018-12-31 10:44

I solved my problem using some css into the web page.

<style media="print">
   @page {
      size: auto;
      margin: 0;
  }
</style>
查看更多
登录 后发表回答