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

小编典典

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

javascript

我已经在SO和其他一些网站上以几种不同的方式问过这个问题，但是其中大多数要么太具体，要么已经过时。我希望有人可以在这里提供明确的答案，而不必担心猜测。

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

请注意：

如果某些浏览器提供了此功能，而另一些却不提供（或者如果您只知道如何为某些浏览器提供此功能），那么我欢迎特定于浏览器的解决方案。

同样，如果您知道主流浏览器对EVER这样做有特定的限制，那么这也很有帮助，但是希望您能得到一些相当新的文档。（当XYZ在过去三年中对上述政策进行了重大更改时，简单地说“违反XYZ的安全政策”并不令人信服）。

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

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

我非常想减少客户网站上PDF的使用量，但主要是担心外观上的侵权（以及缺乏可靠性）。

阅读 796

2020-04-25

共1个答案

小编典典

CSS标准启用了一些高级格式。@pageCSS中有一个指令，可启用某些仅适用于分页媒体（如纸张）的格式。。

缺点是不同浏览器中的行为不一致。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>

请注意，我们基本上在这里禁用了页面特定的页边距，以达到删除页眉和页脚的效果，因此我们在正文上设置的页边距将不会在分页符中使用，这意味着它将只能工作如果打印的内容只有一页，则正确。

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

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

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

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

因此结论是，就隐藏页眉/页脚而言， Chrome 具有最佳的实现方式。

2020-04-25