小编典典

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

all

我在 SO 和其他几个网站上看到过以几种不同方式提出的这个问题,但其中大多数要么过于具体,要么已经过时。我希望有人可以在这里提供明确的答案,而无需迎合猜测。

当有人在浏览器中打印时,有没有办法使用 CSS 或 javascript 来更改默认打印机设置?当然,“从他们的浏览器打印”是指某种形式的 HTML,而不是
PDF 或其他依赖插件的 mime 类型。

请注意:

如果某些浏览器提供此功能而其他浏览器不提供(或者如果您只知道如何为某些浏览器执行此操作),我欢迎特定于浏览器的解决方案。

同样,如果您知道主流浏览器对 EVER 执行此操作有特定限制,那也很有帮助,但我们将不胜感激一些相当最新的文档。(当 XYZ
在过去三年中对上述政策做出重大改变时,简单地说“这违反了 XYZ 的安全政策”并不是很有说服力)。

最后,当我说“更改默认打印设置”时,我并不是说永远,只是为了我的页面,我特指打印页边距、页眉和页脚。

我非常清楚 CSS 提供了更改页面方向和页边距的选项。众多难题之一是 Firefox。如果我将页边距设置为 1 英寸,它会将其添加到它已经放置的半英寸。

我非常想减少我客户网站上 PDF 的使用,但对演示文稿的侵权(以及缺乏可靠性)是他们主要关注的问题。


阅读 123

收藏
2022-07-18

共1个答案

小编典典

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>

注意,我们这里基本上禁用了页面特定的边距,以达到去除页眉和页脚的效果,所以我们在正文上设置的边距不会在分页符中使用(正如Konrad
评论的那样
),这意味着它只会起作用如果打印的内容只有一页,则正确。

这在Firefox 3.6IE 7Safari 5.1.7Google Chrome 4.1 中不起作用。

设置@page 页边距在 IE 8Opera 10Google Chrome 21Firefox 19
中确实有效。
尽管在这些浏览器中为您的内容正确设置了页边距,但在尝试解决页眉/页脚的隐藏问题时,这种行为并不理想。

这是它在不同浏览器中的行为方式:

  • Internet Explorer 中,此打印设置中的边距实际上设置为 0mm,如果您进行预览,您将获得 0mm 作为默认值,但用户可以在预览中更改它。
    您将看到页面内容实际上 定位 正确,但浏览器打印页眉和页脚显示为非透明背景,因此有效地将页面内容隐藏在该位置。

  • Firefox 较新版本中,它的 位置 正确,但页眉/页脚文本和内容文本都会显示,因此它看起来像是浏览器页眉文本和页面内容的错误混合。

  • Opera 中,当在标准 css 中使用非透明背景时,页面内容会隐藏页眉,并且页眉/页脚位置与内容冲突。相当不错,但如果将边距设置为导致标题部分可见的小值,则看起来很奇怪。此外,页边距设置不正确。

  • Chrome 较新版本中,如果 @page 边距设置得太小以至于页眉/页脚位置与内容冲突,浏览器页眉和页脚将被隐藏。在我看来,这正是它应该表现的方式。

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

2022-07-18