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

问题描述

我已经看到这个问题在 SO 和其他几个网站上以几种不同的方式提出，但是大多数都是太具体或 out-of-date 。我希望有人可以在这里提供一个明确的答案，而不用揣测投机。

有没有一种方法，使用 CSS 或 JavaScript，当有人在浏览器中打印时，更改默认打印机设置？当然，通过「浏览器打印」，我的意思是一些形式的 HTML，而不是 PDF 或其他一些 plug-in 依赖的 mime-type 。

请注意：

如果有些浏览器提供这些浏览器，而其他浏览器没有 (或者如果你只知道如何为一些浏览器做)，我欢迎 browser-specific 解决方案。

同样，如果您知道主流浏览器对 EVER 有特定限制，那么这也是有帮助的，但是一些相当的 up-to-date 文档将不胜感激。 (简称「违反 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>

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.

这在 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，但用户可以在预览中进行更改。您将看到页面内容实际上正确定位，但浏览器打印页眉和页脚显示为 non-transparent 背景，因此有效地将页面内容隐藏在该位置。
在 Firefox 较新的版本中，它的位置正确，但是显示页眉/页脚文本和内容文本，因此它看起来像浏览器标题文本和页面内容的混合。
在 Opera 中，页面内容在标准 css 中使用 non-transparent 背景隐藏标题，并且页眉/页脚位置与内容冲突。非常好，但是如果边距设置为导致标题部分可见的小值，则看起来很奇怪。页边距也不正确。
在 Chrome 较新的版本中，如果 @page 页边距设置如此小，以使页眉/页脚位置与内容冲突，则浏览器页眉和页脚将被隐藏。在我看来，这正是这个应该如何行事。

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

次佳解决方案

任何最新版本的 Chrome 和 Opera，以及 Firefox 48 alpha 1 and greater

您可以将页边距设置为太小以避免包含文本的大小以禁用此选项 (借用 awe 的答案)：



@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%20Javascript%20:-(" 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>

对于 Firefox up to 48 alpha 1 的版本

您可以将 mozNoMarginBoxes 属性添加到<html> 标记，以防止 Firefox 添加到页面边距的 URL，页码和其他东西被打印。

它在 Firefox 29 及以上版本中工作。 You can see a screen shot of the difference here 或 see here for a live example.

请注意，示例中的 mozDisallowSelectionPrint 属性不需要从边距中删除文本; 见 What does the mozdisallowselectionprint attribute in PDF.js do? 。

其它浏览器

不幸的是，似乎有知道在 Internet Explorer 中解决这个问题的方法，所以你不得不诉诸于 PDF 或者要求用户禁用保证金。

Safari 也是如此; 根据 @Luiz Perez 的评论，Safari(8,9.1 和 10) 的最新版本仍然不支持 @page 来抑制边文本。

我在 Edge 上找不到任何东西，我没有 Windows 10 安装可供测试。

第三种解决方案

正如 @Awe 上面所说的，这是解决方案，这被证实在 Chrome 中工作！

只需确保这是标题标签内的 INSIDE：

<head>
<style type="text/css" media="print">
    @page
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    body
    {
        background-color:#FFFFFF;
        border: solid 1px black ;
        margin: 0px;  /* this affects the margin on the content before sending to printer */
   }
</style>
</head>

第四种方案

安东尼，

不幸的是，这么多人不明白你的问题。我有一个类似的请求，一个客户端想要删除标题，页码和 html 页脚。在这种情况下，客户端正在呈现可以正式证书加倍的 HTML 页面。添加的 URL，页面和标题不相关，并导致 less-than-pleasing 最终产品。在某些方面，它看起来很便宜。

Media = Print 无法禁用这些浏览器默认值。唯一的解决方法是告诉用户单击”Gear” 按钮并打开/关闭这些项目。真的，我不知道我可以做 20 年 (我们认为典型的用户会有一个线索点击切换按钮？) 。

如果 CSS 支持 Media = Print，它应该支持控制整个 end-user 打印体验的能力。我欣赏浏览器提供了添加的字段，但是为什么不允许 CSS 控制整个打印的 experience-if 是所需的。 90％的解决方案可能是 100％，还有三个领域！一个简单的：

#BrowserPrintDefaults{display:none}

就够了

再次，end-user 是否想要打印出来 (这可能是您的客户端非常私密，不希望打印的网址浮动)，或者也许一个执行团队使用私人协作网站呢？很高兴捍卫 end-user，但如果有人正在寻求答案，请不要回复说这是 end-user 展示或隐藏的权利。有时客户支付账单的权利。

所以…. 没有黑客注册表或强制用户切换设置在打印预览，任何人找到答案？

第五种方案

无法从 CSS 或 JavaScript 中暂时或永久地更改打印机设置，页边距或任何其他浏览器设置。

虽然这对您的真实要求是不幸的，但这些限制是 95％的网络用户在其浏览器中启用 JavaScript 的原因。 (Browser Statistics)

第六种方案

尝试这段代码，为我工作 100％：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>

参考文献

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

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

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