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

我曾在 SO 和其他几个网站上看到过这个问题以几种不同的方式被问到，但是大多数问题要么太具体，要么已经过时了。我希望有人能在这里给出一个明确的答案，而不是迎合猜测。

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

请注意:

如果有些浏览器提供这种功能，而其他浏览器不提供(或者如果您只知道如何为某些浏览器提供这种功能) ，我欢迎特定于浏览器的解决方案。

类似地，如果您知道一个主流浏览器对这样做有特定的限制，这也是有帮助的，但一些相当最新的文档将不胜感激。(当 XYZ 在过去三年中对安全策略做出重大改变时，简单地说“这违背了 XYZ 的安全策略”是不能令人信服的)。

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

我非常清楚 CSS 提供了改变屏幕方向和页边距的选项。其中一个难题就是 Firefox。如果我设置页边距为1英寸，它添加到半英寸，它已经放置到位。

我非常希望减少在我的客户的网站上使用 PDF 文件，但侵犯表示(以及缺乏可靠性)是他们主要关注的问题。

278223 次浏览
小开

既然你提到了“在他们的浏览器中”和 firefox，如果你使用的是 Internet Explorer，你可以通过在注册表中临时设置值来禁用页眉/页脚，参见 给你的例子。AFAIK 我还没有听说过在其他浏览器中这样做的方法。Daniel 和 Mickel 的答案似乎相互冲突，我猜想在 Firefox 的注册表中可能有类似的设置来删除页眉/页脚或自定义它们。你查过了吗？

小开
最佳答案

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>

请注意，我们基本上禁用页面特定的边距，以实现删除页眉和页脚的效果，所以我们在主体上设置的边距将不会用于分页符(如 康拉德评论)这意味着它只有在打印内容只有一页时才能正常工作。

这在 Firefox 3.6、 IE 7、 Safari 5.1.7或 谷歌 Chrome 4.1中不起作用。

在 IE8、 歌剧十、 谷歌 Chrome 21和 火狐19中，设置@页边距确实有效 尽管在这些浏览器中为您的内容正确设置了页边距，但是在试图解决页眉/页脚隐藏问题时，这种行为并不理想。译注:

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

    在 Internet Explorer中，在这个打印的设置中，边距实际上被设置为0毫米，如果你做了预览，你会得到默认的0毫米，但是用户可以在预览中改变它。< br/> 您将看到页面内容实际上是正确的 定位，但是浏览器打印页眉和页脚显示为非透明背景，因此有效地将页面内容隐藏在该位置。译注:
  • 在 火狐的新版本中，它是正确的 定位，但是页眉/页脚文本和内容文本都会显示，所以它看起来像是浏览器页眉文本和页面内容的糟糕混合。

  • 在 歌剧中，在标准 css 中使用非透明背景时，页面内容会隐藏页眉，页眉/页脚位置与内容冲突。非常好，但是如果页边距被设置为一个小值，导致页眉部分可见，那么看起来就很奇怪了。此外，页边距设置不正确。

  • 在 铬合金的新版本中，如果@page 页边距设置得太小，导致页眉/页脚位置与内容冲突，那么浏览器的页眉和页脚就是隐藏的。在我看来，这正是我们应该做的。

因此，结论是 铬合金在隐藏页眉/页脚方面具有最佳的实现。

小开

我有一个来自客户端的类似请求，客户端希望删除页眉、页码和 html 页脚。在这种情况下，客户端呈现的 HTML 页面可以兼作正式证书。添加的 URL、页面和标题是不相关的，并且会导致不那么令人满意的最终产品。在某些方面，它看起来很便宜。

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

如果 CSS 支持 Media = Print，那么它应该支持控制整个最终用户打印体验的能力。我很欣赏浏览器提供的添加字段，但是，为什么不允许 CSS 控制整体打印体验-如果这是所希望的。一个90% 的解决方案可以是100% 的，多出三个字段！一个简单的问题:

#BrowserPrintDefaults{display:none}

就足够了。

同样，最终用户是否想要打印出来并不重要(也许你的客户是非常私有的，并且不希望打印出来的 URL 到处漂浮)。或者一个执行团队使用一个私有的协作网站?).很高兴为最终用户辩护，但是如果有人正在寻找答案，不要回应说最终用户有权展示或隐藏。有时候这是客户支付账单的权利。

小开

正如@Awe 上面所说，这就是解决方案，确认可以在 Chrome 中运行! ！

只要确保这是在头部标签里面:

<head>
<style 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>
小开

@ page edge: 0 mm 现在可以在 Firefox 19.0 a2(2012-12-07)中使用。

小开

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

你可以将页边距设置为太小以至于无法包含文本的大小，以便禁用此选项(借用 敬畏的答案) :

@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 Javascript :-(" 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 直至48alpha 1的版本

您可以向 <html>标记添加一个 mozNoMarginBoxes属性，以防止打印 Firefox 添加到页边距中的 URL、页码和其他内容。

它可以在 Firefox29及以后的版本中工作

请注意，示例中的 mozDisallowSelectionPrint属性是从页边距中删除文本所需的 没有; 请参见 标题 = “ PDF.js 中的 mozdisallowselectionprint 属性是做什么的?”PDF.js 中的 mozdisallowselectionprint 属性是做什么的。

其他浏览器

不幸的是，似乎没有办法解决这个问题的 Internet Explorer，所以你将不得不求助于 PDF 或要求用户禁用边距文本。

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

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

小开
试试这个代码，对我100% 有效: < br/> FOR 景观:

<head>
<style type="text/css">


@page{
size: auto A4 landscape;
margin: 3mm;
}


</style>
</head>

为了 肖像:

<head>
<style type="text/css">


@page{
size: auto;
margin: 3mm;
}


</style>
</head>
小开

我解决了我的问题使用一些 CSS 到网页。

<style media="print">
@page {
size: auto;
margin: 0;
}
</style>
小开

对于 1厘米边缘，这个方法对我很有效

@page
{
size:  auto;   /* auto is the initial value */
margin: 0mm;  /* this affects the margin in the printer settings */
}
html
{
background-color: #FFFFFF;
margin: 0mm;  /* this affects the margin on the html before sending to printer */
}
body
{
padding:30px; /* margin you want for the content */
}

提交答案