182

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

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

请注意：

如果某些浏览器提供了此功能，而另一些却不提供（或者如果您只知道如何为某些浏览器提供此功能），那么我欢迎特定于浏览器的解决方案。

同样，如果您知道主流浏览器对EVER这样做有特定的限制，那也很有帮助，但是希望您能得到一些相当新的文档。（当XYZ在过去三年中对上述策略进行了重大更改时，简单地说“违反XYZ的安全策略”并不令人信服）。

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

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

我非常想减少客户网站上PDF的使用量，但主要是担心外观上的侵权（以及缺乏可靠性）。

— 安东尼
source

您是否有任何特定原因要这样做？如果您说出要求，那么也许还有另一种可能的解决方案...对我来说，更改用户设置似乎不是一个很好的解决方案...

— Nivas 2009年

1

我同意。我不想更改用户设置。我想覆盖浏览器的默认设置。原因是因为替代方法是使用PDF，当可以通过CSS使其他所有内容对打印机友好时，这似乎是不必要的。

— 安东尼

我认为您已经检查了答案作为解决方案，但仅适用于chrome。您是否能够获得正确的跨浏览器解决方案？或至少在一些浏览器中？因为我有同样的问题

— mavili 2014年

@mavili 有关跨浏览器的解决方案，请参见stackoverflow.com/a/23778125/453605。

— Marcello Nuccio

200

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>

请注意，我们基本上在这里禁用了页面特定的页边距，以达到删除页眉和页脚的效果，因此我们在正文上设置的页边距将不会用在分页符中（如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具有最佳的实现方式。

— 敬畏
source

1

为了澄清，这似乎并没有删除Firefox 21或IE10的标头，尽管我怀疑这确实导致标头/页脚没有占用空间。它的工作与Chrome的28

— amh15

2

我已经更新以反映较新的浏览器版本。Chrome现在已实现了最佳效果。

— 敬畏

@SearchForKnowledge：是的，就像我说的一样-如果您在有关IE中行为的描述下阅读了我的答案：“您将看到页面内容实际上已正确定位，但是浏览器的打印页眉和页脚隐藏了该页面满足那个位置。” 我说它在IE 8中“确实有效”，而不是像我们想要的那样工作。我将编辑我的答案以使其更清楚。

— 2014年

除去标题，也除去左边的marign。所以我的所有文字现在都在页面的边缘。

— 米切尔

7

该解决方案根本不起作用在所有的，因为@page利润率和body利润是根本不同的东西：body余量仅适用于全身，即第一页的顶部，最后一页的底部。对于所有中间页面，顶部/底部仍将具有零页边距。

— 康拉德·鲁道夫

86

任何最新版本的Chrome和Opera，以及Firefox 48 alpha 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 最高 48 alpha 1的版本

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

它可以在Firefox 29及更高版本中使用。您可以在此处查看差异的屏幕截图，或在此处查看实时示例。

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

其它浏览器

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

Safari也是如此；根据评论 @Luiz Perez，Safari的最新版本（8、9.1和10）仍不支持 @page禁止显示空白文本。

我在Edge上找不到任何内容，也没有Windows 10安装可供测试。

— 用户名
source

5

老实说，我同意这一点。如果您使用“系统对话框”进行打印，它甚至可以在Chrome中使用。只要确保<!DOCTYPE html> <html moznomarginboxes mozdisallowselectionprint>已设置。资料来源：https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383

— 彼得

3

在Firefox上运行良好。因此，这与@page{ size: auto; margin: 3mm; } 支持chrome和safari 一起为我提供了跨浏览器解决方案。

— 克莱恩·席尔瓦

该解决方案非常有效，可以消除FF中印刷材料中不需要的信息/内容。谢谢！

— Varvara Jones 2015年

这很棒，但是IE呢？

— 桑托什

1

我在Safari 8、9.1和10上测试了此代码段，但并未删除那些版本的Safari中的页眉或页脚。

— 路易斯·佩雷斯

21

就像@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>

— 作品
source

3

这是一个很好的解决方案！删除边距并删除页眉和页脚。我唯一的变化是，然后添加padding: 0.25in 0.5in;到车身样式中，以便获得准确，干净的打印所需的确切边距。在Chrome v25中工作，并且值得庆幸的是，对于这个特定的项目，我们可以要求最终用户从多个现代浏览器中进行选择。

— Charlie Schliesser

2

不幸的是，这会导致多页打印输出的问题。页面底部的文本被剪切。

— 乔纳森

在具有单页输出的Chrome 67.0.3396.99和Firefox 62.0b5上完美运行。

— killscreen

16

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

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

如果CSS支持Media = Print，则它应该支持控制整个最终用户打印体验的功能。我感谢浏览器提供了添加的字段，但是，为什么需要CSS来控制总体打印体验？90％的解决方案可能是100％的三个领域！一个简单的：

#BrowserPrintDefaults{display:none}

就足够了。

同样，最终用户是否要打印出来也无关紧要（也许您的客户是非常私人的，不希望打印的URL随处可见。或者执行团队使用私人协作网站？）。很高兴为最终用户辩护，但如果有人在寻找答案，请不要回应，这是最终用户显示或隐藏的权利。有时候，这是客户支付账单的权利。

— CAL
source

我最终放弃了自己想要的一切。我绝对同意这应该在CSS中公开，因为所有浏览器都具有这些设置，并且这是一个表示元素。但是，这是作为应用程序级别首选项的场景，例如关闭cookie。

— 安东尼

1

这是一个官方的CSS标准，使用@Page指令来设置打印机页边距（与html页面的正文页边距不同）。当前，除Safari之外，所有主流浏览器都支持此功能，但是它如何影响页眉/页脚却有所不同。最好的实现是在Opera和Chrome中。

— 敬畏

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>

— 是的男孩
source

1

CSS页面规则将设置边距，但不会删除浏览器放置的内置页眉和页脚（页面URL，页面编号等）

— 安东尼

0

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

希望这对您有所帮助，祝您节日快乐，汤姆，问候您。

— t0mm13b
source

1

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

— 敬畏

0

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

— 士兵
source

0

我通过使用一些CSS解决了我的问题。

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

— 卡比尔·侯赛因
source

0

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

— 苦参
source

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

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

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

对于Firefox 最高 48 alpha 1的版本

其它浏览器