发表新帖
发表新帖

Disabling browser print options (headers, footers, margins) from page?

后端 未结
关注
9 812
生来不讨喜
生来不讨喜 2020-11-22 08:34

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

相关标签:
9条回答
  • 迷失自我
    2020-11-22 08:53

    This worked for me with about 1cm margin

    @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 讨论(0)
  • 伪装坚强ぢ
    2020-11-22 08:54

    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.

    0 讨论(0)
  • 伪装坚强ぢ
    2020-11-22 08:54

    Since you mentioned "within their browser" and firefox, if you are using Internet Explorer, you can disable the page header/footer by temporarily setting of the value in the registry, see here for an example. AFAIK I have not heard of a way to do this within other browsers. Both Daniel's and Mickel's answers seems to collide with each other, I guess that there could be a similar setting somewhere in the registry for firefox to remove headers/footers or customize them. Have you checked it out?

    0 讨论(0)
  • 伪装坚强ぢ
    2020-11-22 08:59

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

    <style media="print">
   @page {
      size: auto;
      margin: 0;
  }
</style>
    0 讨论(0)
  • 情书的邮戳
    2020-11-22 09:07

    Try this code, works 100% for me:
    FOR Landscape:

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

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

</style>
</head>

    FOR Portait:

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

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

</style>
</head>
    0 讨论(0)
  • 遇见更好的自我
    2020-11-22 09:12

    The CSS standard enables some advanced formatting. There is a @page directive in CSS that enables some formatting that applies only to paged media (like paper). See http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html.

    Downside is that behavior in different browsers is not consistent. Safari still does not support setting printer page margin at all, but all the other major browsers now support it.

    With the @page directive, you can specify printer margin of the page (which is not the same as normal CSS margin of an HTML element):

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

    Note that we basically disables the page-specific margins here to achieve the effect of removing the header and footer, so the margin we set on the body will not be used in page breaks (as commented by Konrad) This means that it will only work properly if the printed content is only one page.

    This does not work in Firefox 3.6, IE 7, Safari 5.1.7 or Google Chrome 4.1.

    Setting the @page margin does have effect in IE 8, Opera 10, Google Chrome 21 and Firefox 19.
    Although the page margins are set correctly for your content in these browsers, the behavior is not ideal in trying to solve the hiding of the header/footer.

    This is how it behaves in different browsers:

    • In Internet Explorer, the margin is actually set to 0mm in the settings for this printing, and if you do Preview you will get 0mm as default, but the user can change it in the preview.
      You will see that the page content actually are positioned correctly, but the browser print header and footer is shown with non-transparent background, and so effectively hiding the page content at that position.

    • In Firefox newer versions, it is positioned correctly, but both the header/footer text and content text is displayed, so it looks like a bad mix of browser header text and your page content.

    • In Opera, the page content hides the header when using a non-transparent background in the standard css and the header/footer position conflicts with content. Quite good, but looks strange if margin is set to a small value that causes the header to be partially visible. Also the page margin is not set properly.

    • In Chrome newer versions, the browser header and footer is hidden if the @page margin is set so small that the header/footer position conflicts with content. In my opinion, this is exactly how this should behave.

    So the conclusion is that Chrome has the best implementation of this in respect to hiding the header/footer.

    0 讨论(0)
 看不清?
提交回复
热议问题