【问题标题】：Disabling browser print options (headers, footers, margins) from page?从页面禁用浏览器打印选项（页眉、页脚、边距）？
【发布时间】：2010-12-29 23:26:37
【问题描述】：

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

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

请注意：

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

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

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

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

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

【问题讨论】：

您有什么特别的理由要这样做吗？如果您说要求，那么也许还有另一个可能解决方案...对我来说，更改用户设置看起来不是一个好的解决方案...
我同意。我不想更改用户设置。我想覆盖浏览器的默认设置。原因是因为另一种选择是使用 PDF，当其他所有内容都可以通过 CSS 对打印机友好时，这似乎是不必要的。
我看到您已将答案作为解决方案进行了检查，但它仅适用于 chrome。您是否能够跨浏览器获得正确的解决方案？或者至少在几个浏览器中？因为我有同样的问题
@mavili 请参阅 stackoverflow.com/a/23778125/453605 了解跨浏览器解决方案。

标签： javascript html css browser printing

【解决方案1】：

由于您提到“在他们的浏览器中”和 firefox，如果您使用的是 Internet Explorer，您可以通过临时设置注册表中的值来禁用页面页眉/页脚，请参阅 here 示例。 AFAIK 我还没有听说过在其他浏览器中执行此操作的方法。 Daniel 和 Mickel 的答案似乎相互冲突，我猜想在注册表中的某处可能有类似的设置，供 firefox 删除页眉/页脚或自定义它们。你检查了吗？

【讨论】：

在 IE7+ 中，您可以通过在打印预览中单击一个简单的按钮来禁用页眉/页脚。无需在注册表中进行！

【解决方案2】：

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

只要确保这是在 head 标签内：

<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>

【讨论】：

这是一个非常好的解决方案！删除边距并删除页眉和页脚。我唯一的改变是在正文样式中添加padding: 0.25in 0.5in;，这样我就有了我需要的精确边距，以便打印出漂亮、干净的打印件。在 Chrome v25 中工作，感谢这个特定项目，我们可以要求最终用户从几个现代浏览器中进行选择。
不幸的是，这会导致多页打印输出出现问题。页面底部的文本被剪裁。
在 Chrome 67.0.3396.99 和 Firefox 62.0b5 上完美运行，单页输出。

【解决方案3】：

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

Media=Print 无法禁用这些浏览器默认设置。唯一的解决方法是告诉用户单击“齿轮”按钮并打开/关闭这些项目。说真的，我不知道我能在 20 年内做到这一点（我们认为典型用户会有点击切换按钮的线索？）。

如果 CSS 支持 Media=Print，它应该支持控制整个最终用户打印体验的能力。我很欣赏浏览器提供了添加的字段，但是，为什么不让 CSS 来控制整体打印体验——如果这是我们想要的。一个 90% 的解决方案可能是 100%，还有三个字段！一个简单的：

#BrowserPrintDefaults{display:none}

就够了。

同样，最终用户是否愿意将其打印出来并不重要（也许您的客户非常私密，不希望打印的网址四处飘荡。或者，执行团队可能使用私人协作网站?)。很高兴为最终用户辩护，但如果有人在寻求答案，请不要回应说这是最终用户展示或隐藏的权利。有时这是客户支付账单的权利。

【讨论】：

我最终放弃了，尽管我不想这样做。我绝对同意这应该在 CSS 中公开，因为所有浏览器都有这些设置并且它是一个表示元素。但这是作为应用程序级别首选项的场景，例如关闭 cookie。
这是一个官方的 CSS 标准，使用@Page 指令来设置打印机边距（与 html 页面的正文边距不同）。目前，除 Safari 之外的所有主要浏览器都支持此功能，但它对页眉/页脚的影响各不相同。最好的实现是在 Opera 和 Chrome 中。

【解决方案4】：

这对我有用，边距约为 1cm

@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 */
}

【讨论】：

【解决方案5】：

任何最新版本的 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 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 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 安装。

【讨论】：

老实说，我同意这一点。如果您使用“系统对话框”进行打印，它甚至可以在 Chrome 中使用。只需确保设置了<!DOCTYPE html> <html moznomarginboxes mozdisallowselectionprint>。来源：https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383
在 Firefox 上效果很好。所以这和@page{ size: auto; margin: 3mm; }一起支持chrome和safari为我做了一个跨浏览器的解决方案。
此解决方案非常适合在 FF 中删除印刷材料中不需要的信息/内容。谢谢！
我在 Safari 8、9.1 和 10 上测试了这个 sn-p，它不会删除这些版本的 Safari 中的页眉或页脚。
这种方法会将内容粘贴到页面之间的边缘：i.imgur.com/krDlC1K.png

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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>

注意我们这里基本上是禁用了page-specific margins来达到去除页眉和页脚的效果，所以我们在body上设置的margin不会用在分页符中（如commented by 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 中，实际打印设置中的边距设置为 0 毫米，如果您进行预览，您将获得 0 毫米作为默认值，但用户可以在预览中更改它。
您将看到页面内容实际上定位正确，但浏览器打印页眉和页脚显示为非透明背景，因此有效地将页面内容隐藏在该位置。
在 Firefox 较新的版本中，它定位正确，但页眉/页脚文本和内容文本都显示，所以它看起来像是浏览器标题的错误组合文本和您的页面内容。
在Opera中，页面内容在标准css中使用非透明背景时会隐藏页眉，并且页眉/页脚位置与内容冲突。相当不错，但如果将边距设置为导致标题部分可见的小值，则看起来很奇怪。另外页边距设置不正确。
在 Chrome 较新的版本中，如果 @page 边距设置得太小以至于页眉/页脚位置与内容冲突，浏览器页眉和页脚将被隐藏。在我看来，这正是它应该表现的方式。

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

【讨论】：

澄清一下，这似乎并没有删除 Firefox 21 或 IE10 的页眉，尽管我怀疑它确实会导致页眉/页脚不占用空间。它适用于 Chrome 28。
我已更新以反映较新的浏览器版本。 Chrome 现在拥有最好的实现方式。
@SearchForKnowledge：是的，正如我所说 - 如果您在 IE 中的行为描述下阅读我的回答：“您将看到页面内容实际上定位正确，但浏览器打印页眉和页脚将页面内容隐藏在该位置。”我说它在 IE 8 中“确实有效”，而不是像我们想要的那样工作......我将编辑我的答案以使其更清晰。
删除标题，但也删除左边距。所以我所有的文字现在都在页面的边缘。
这个解决方案根本不起作用根本，因为@page 边距和body 边距根本不同：body 边距仅适用于整体，即第一页的顶部和最后一页的底部。对于所有中间页面，顶部/底部的边距仍然为零。

【解决方案8】：

试试这个代码，100% 对我有用：
FOR 横向：

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

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

</style>
</head>

FOR 肖像：

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

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

</style>
</head>

【讨论】：

CSS 页面规则会设置页边距，但不会移除浏览器内置的页眉和页脚（页面 URL、页码等）

【解决方案9】：

@page margin:0mm 现在适用于 Firefox 19.0a2 (2012-12-07)。

【讨论】：