从页面禁用浏览器打印选项(页眉,页脚,边距)?

问题:

我曾经在SO和其他几个网站上看过这个问题,但是其中大多数都是过于具体或者过时的。我希望有人可以在这里提供一个明确的答案,而不会被炒作。
当用户在浏览器中打印时,有没有办法通过CSS或JavaScript来更改默认的打印机设置?当然,“从他们的浏览器打印”我的意思是某种形式的HTML,而不是PDF或其他插件依赖MIME类型。
请注意:
如果某些浏览器提供了此功能,而其他浏览器则不提供(或者您只知道如何为某些浏览器执行此操作),则欢迎使用特定于浏览器的解决方案。
同样的,如果你知道一个主流的浏览器对EVER有特殊的限制,这也是有帮助的,但是有些相当新的文档是值得赞赏的。 (当XYZ在过去三年中对上述政策做出重大改变时,简单地说“这违背了XYZ的安全政策”并不是很有说服力)。
最后,当我说“更改默认打印设置”时,我并不意味着永远只为我的页面,我特指打印边距,页眉和页脚。
我非常清楚,CSS提供了更改页面方向以及页边距的选项。 Firefox的许多困难之一是。如果我将页边距设置为1英寸,则将其添加到已经放置的半英寸。
我非常希望减少我客户网站上PDF的使用,但是主要关心呈现方面的侵权(以及缺乏可靠性)。

回答:

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>

请注意,我们基本上禁用了页面特定页边距,以实现删除页眉和页脚的效果,因此我们在页面中设置的页边距不会在分页符中使用(如commented by Konrad)。这意味着它只能工作如果打印的内容只有一个页面的话。

这在Firefox 3.6IE 7Safari 5.1.7Google Chrome 4.1中不起作用
设置@页边距在IE 8Opera 10Google Chrome 21Firefox 19
虽然在这些浏览器中为页面页边距设置正确,但是在试图解决页眉/页脚的隐藏方面,这种行为并不理想。

这是如何在不同的浏览器中表现:

  • IE浏览器中,边距实际上在此打印设置中设置为0mm,如果您进行预览,则默认情况下会获得0mm,但是用户可以在预览中更改它。
    您将看到页面内容实际上是positioned,但是浏览器打印页眉和页脚以非透明背景显示,因此有效地将页面内容隐藏在该位置。
  • 火狐个较新的版本中,positioned正确,但是页眉/页脚文本和内容文本都显示出来,所以它看起来像是浏览器标题文本和页面内容的混合。
  • 歌剧中,页面内容在标准css中使用非透明背景时隐藏标题,并且页眉/页脚位置与内容冲突。相当不错,但如果页边距设置为一个小的值,导致页眉部分可见,看起来很奇怪。此外,页边距设置不正确。
  • 更新的版本中,如果页面页边距设置得太小以致页眉/页脚位置与内容冲突,则浏览器页眉和页脚将被隐藏。在我看来,这正是应该如何表现。

所以结论是在隐藏页眉/页脚方面具有最好的实现。

 
 
Code问答: http://codewenda.com/topics/javascript/
Stackoverflow: Disabling browser print options (headers, footers, margins) from page?

*转载请注明本文链接以及stackoverflow的英文链接

发表评论

电子邮件地址不会被公开。 必填项已用*标注

− 2 = 1