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

IT技术 javascript html css browser printing
2021-02-01 05:17:03

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

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

请注意：

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

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

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

我很清楚 CSS 提供了更改页面方向和页边距的选项。许多斗争之一是使用 Firefox。如果我将页边距设置为 1 英寸，它会将其添加到它已经放置到位的半英寸。

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

6个回答

CSS 标准支持一些高级格式。@pageCSS 中有一个指令可以启用某些仅适用于分页媒体（如纸张）的格式。参见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>

注意我们这里基本上禁用了页面特定的边距，以达到去除页眉和页脚的效果，所以我们在body上设置的边距不会在分页符中使用（如Konrad所评论）这意味着它只会起作用如果打印的内容只有一页，则正确。

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

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

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

  • 在Internet Explorer 中，此打印的设置中的边距实际上设置为 0mm，如果您进行预览，则默认为 0mm，但用户可以在预览中更改它。
    您将看到页面内容实际上已正确定位，但浏览器打印页眉和页脚显示为非透明背景，因此有效地隐藏了该位置的页面内容。

  • 在Firefox较新版本中，它的位置正确，但页眉/页脚文本和内容文本都会显示，因此它看起来像是浏览器页眉文本和页面内容的错误组合。

  • 在Opera 中，在标准 css 中使用非透明背景时，页面内容会隐藏页眉，并且页眉/页脚位置与内容冲突。相当不错，但如果将边距设置为一个导致标题部分可见的小值，则看起来很奇怪。此外页边距设置不正确。

  • 在Chrome较新版本中，如果 @page 边距设置得太小以至于页眉/页脚位置与内容冲突，则浏览器页眉和页脚将被隐藏。在我看来，这正是它应该表现的方式。

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

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

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

您可以将页边距设置为太小而无法包含文本的大小以禁用此功能（借用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>

适用于最高48 alpha 1的 Firefox 版本

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

它适用于 Firefox 29 及更高版本。您可以在此处查看差异的屏幕截图，或在此处查看现场示例。

注意，mozDisallowSelectionPrint在该示例属性不要求除去从边缘的文本; 请参阅PDF.js 中的 mozdisallowselectionprint 属性有什么作用？.

其它浏览器

不幸的是，在 Internet Explorer 中似乎没有办法解决这个问题，因此您必须求助于 PDF 或要求用户禁用边距文本。

Safari 也是如此；根据@Luiz Perez的评论，最新版本的 Safari（8、9.1和 10）仍然不支持 @page抑制边距文本。

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

这很棒，但是 IE 呢？
2021-03-11 05:17:03
我在 Safari 8、9.1 和 10 上测试了这个片段，它没有删除这些版本的 Safari 中的页眉或页脚。
2021-03-21 05:17:03
老实说，我同意这一点。如果您使用“系统对话框”进行打印，它甚至可以在 Chrome 中使用。只要确保<!DOCTYPE html> <html moznomarginboxes mozdisallowselectionprint>已设置。来源：https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383
2021-03-27 05:17:03
该解决方案非常适合在 FF 中删除印刷材料中不需要的信息/内容。谢谢！
2021-03-27 05:17:03
在 Firefox 上效果很好。所以这连同 @page{ size: auto; margin: 3mm; } 支持 chrome 和 safari 为我做了一个跨浏览器的解决方案。
2021-04-06 05:17:03

正如@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>
这是一个非常好的解决方案！删除边距并删除页眉和页脚。我唯一的改变是然后添加padding: 0.25in 0.5in;到主体样式中，以便我拥有漂亮、干净的打印所需的确切边距。在 Chrome v25 中工作，幸运的是，对于这个特定项目，我们可以要求最终用户从几个现代浏览器中进行选择。
2021-03-14 05:17:03
不幸的是，这会导致多页打印输出出现问题。页面底部的文本被剪切。
2021-03-19 05:17:03
在 Chrome 67.0.3396.99 和 Firefox 62.0b5 上完美运行，具有单页输出。
2021-04-03 05:17:03

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

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

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

#BrowserPrintDefaults{display:none}

就足够了。

同样，最终用户是否想要打印它并不重要（也许您的客户非常私密并且不希望打印的 URL 四处飘散。或者，执行团队可能使用私人协作站点？）。很高兴为最终用户辩护，但如果有人寻求答案，请不要回应说显示或隐藏是最终用户的权利。有时，这是客户支付账单的权利。

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

试试这个代码，对我来说 100% 有效：
FOR Landscape：

<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、页码等）
2021-03-29 05:17:03
其它你可能感兴趣的问题
上一篇仅比较日期部分而不比较 JavaScript 中的时间 下一篇如何检查 DST（夏令时）是否有效，如果有效，偏移量？