堆栈内存溢出
  繁体   English   中英

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

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

 原文  2009-12-25 10:33:32  1   9    javascript/ html/ css/ browser/ printing

问题描述

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

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

请注意：

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

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

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

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

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

9 个解决方案

解决方案1
 201 已采纳  2010-05-06 11:01:25

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>

注意我们这里基本上禁用了页面特定的边距，以达到去除页眉和页脚的效果，所以我们在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在隐藏页眉/页脚方面有最好的实现。

解决方案2
 86  2014-05-21 08:40:25

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

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

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

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

其它浏览器

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

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

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

解决方案3
 22  2012-03-28 03:38:57

正如@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>

解决方案4
 16  2011-07-07 17:10:54

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

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

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

#BrowserPrintDefaults{display:none}

就足够了。

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

解决方案5
 7  2015-03-06 06:12:26

试试这个代码，对我来说 100% 有效：
景观：

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

解决方案6
 1  2009-12-25 12:32:03

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

解决方案7
 0  2012-12-11 16:50:36

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

解决方案8
 0  2016-10-03 03:16:26

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

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

解决方案9
 0  2019-01-09 15:46:27

这对我有用，边距大约为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 */
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 禁用浏览器打印页眉和页脚，同时保留页边距，也禁用第2、3页等 在IE中打印时无法摆脱页边距，页眉和页脚 在Chrome打印对话框中禁用打印选项 如何在 HTML、CSS 和 JavaScript 中添加打印页眉和页脚？ 打印HTML文档时插入页面页眉/页脚 在HTML打印页面上禁用javascript 使用 print.js 自定义页边距 禁用网页的浏览器缓存，不适用于IE 在Google Chrome中，Google文档可以通过javascript控制页眉和页脚。 有谁知道这是如何实现的？ 从“打印页面”禁用特定于浏览器的页眉和页脚
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM