从页面禁用浏览器打印选项（页眉、页脚、边距）？

小编典典

从页面禁用浏览器打印选项（页眉、页脚、边距）？

all

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

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

请注意：

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

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

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

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

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

阅读 125

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.6 、 IE 7 、 Safari 5.1.7 或 Google Chrome 4.1 中不起作用。

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

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

在 Internet Explorer 中，此打印设置中的边距实际上设置为 0mm，如果您进行预览，您将获得 0mm 作为默认值，但用户可以在预览中更改它。
您将看到页面内容实际上定位正确，但浏览器打印页眉和页脚显示为非透明背景，因此有效地将页面内容隐藏在该位置。
在 Firefox 较新版本中，它的位置正确，但页眉/页脚文本和内容文本都会显示，因此它看起来像是浏览器页眉文本和页面内容的错误混合。
在 Opera 中，当在标准 css 中使用非透明背景时，页面内容会隐藏页眉，并且页眉/页脚位置与内容冲突。相当不错，但如果将边距设置为导致标题部分可见的小值，则看起来很奇怪。此外，页边距设置不正确。
在 Chrome 较新版本中，如果 @page 边距设置得太小以至于页眉/页脚位置与内容冲突，浏览器页眉和页脚将被隐藏。在我看来，这正是它应该表现的方式。

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

2022-07-18