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

Question

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

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

请注意：

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

同样，如果您知道主流浏览器对EVER有特定限制，这也很有帮助，但一些相当最新的文档将不胜感激。（简单地说“违背XYZ的安全政策”并不十分令人信服，因为XYZ在过去三年中对所述政策做出了重大改变）。

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

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

我非常希望减少客户网站上PDF的使用，但是主要关注的是对展示的侵权（以及缺乏可靠性）。

Answer 1

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>

请注意，我们在这里基本上禁用了页面特定的边距以实现删除页眉和页脚的效果，因此我们在主体上设置的边距将不会用于分页符（如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 中，此打印设置中的边距实际设置为0mm，如果您执行预览，默认情况下将获得0mm，但用户可以更改预览。
您将看到页面内容实际上正确定位，但浏览器打印页眉和页脚显示为非透明背景，因此有效地将页面内容隐藏在该位置。
在 Firefox 较新版本中，定位正确，但页眉/页脚文字和内容文字都会显示，所以它看起来像是一个糟糕的混音浏览器标题文本和页面内容。
在 Opera 中，当在标准css中使用非透明背景并且页眉/页脚位置与内容冲突时，页面内容会隐藏页眉。相当不错，但如果将margin设置为一个小值，导致标题部分可见，则看起来很奇怪。页面边距也未正确设置。
在 Chrome 较新版本中，如果@page边距设置得太小以至于页眉/页脚位置与内容冲突，则会隐藏浏览器页眉和页脚。在我看来，这正是应该如何表现的。

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

Answer 2

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

的版本

您可以在<html>标记中添加mozNoMarginBoxes属性，以防止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也是如此;根据{{3}}的评论，最新版本的Safari（8,9.1和10）仍然不支持@page来抑制边距文本。

我在Edge上找不到任何内容，但我没有可用于测试的Windows 10安装。

Answer 3

正如@Awe上面所说，这是解决方案，已确认可在Chrome中使用!!

只需确保这是头部标签：

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

Answer 4

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

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

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

#BrowserPrintDefaults{display:none}

就足够了。

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

Answer 5

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

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

Answer 6

试试这段代码，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>

Answer 7

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

希望这有助于节日快乐，最好的祝福，汤姆。

Answer 8

@page margin：0mm现在可以在Firefox 19.0a2（2012-12-07）中使用。

Answer 9

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

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

Answer 10

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

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

10 个答案:

这是它在不同浏览器中的行为方式：

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

适用于Firefox up to 48 alpha 1

其他浏览器