css 是否从页面禁用浏览器打印选项(页眉、页脚、边距)？

yvfmudvl 于 2023-02-06 发布在其他

关注(0)|答案(9)|浏览(184)

我在SO和其他几个网站上看到过这个问题以不同的方式被问到，但大多数都太具体或过时了。我希望有人能在这里提供一个明确的答案，而不是迎合猜测。
有没有一种方法，无论是CSS还是JavaScript，可以改变默认的打印机设置，当有人在他们的浏览器中打印时？当然，"从他们的浏览器打印"我指的是某种形式的HTML，而不是PDF或其他依赖于mime类型的插件。
请注意：
如果一些浏览器提供了这个功能，而另一些没有（或者如果您只知道如何为一些浏览器做这个功能），我欢迎特定于浏览器的解决方案。
类似地，如果您知道某个主流浏览器有特定的限制，禁止您这样做，这也是很有帮助的，但最好提供一些最新的文档（简单地说"这违反了XYZ的安全策略"是不太令人信服的，因为XYZ在过去三年中对上述策略进行了重大更改）。
最后，当我说"更改默认打印设置"时，我并不是指永远，只是针对我的页面，我指的是打印边距、页眉和页脚。
我很清楚CSS提供了改变页面方向和页面边距的选项，其中一个问题是Firefox。如果我将页面边距设置为1英寸，它会将其添加到已经设置的半英寸上。
我非常想减少PDF在我客户网站上的使用，但他们主要关心的是演示文稿的侵权（以及缺乏可靠性）。

css

来源：https://stackoverflow.com/questions/1960939/disabling-browser-print-options-headers-footers-margins-from-page

9条答案

按热度按时间

bxgwgixi1#

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>

请注意，我们在这里基本上禁用了特定于页面的边距，以达到删除页眉和页脚的效果，因此我们在正文上设置的边距将不会用于分页符（如Konrad所评论的）这意味着只有在打印内容只有一页时，它才能正常工作。
这在火狐3.6、IE 7、Safari 5.1.7或谷歌浏览器4.1中不起作用。
在IE 8、Opera 10、Google Chrome 21和Firefox 19中，设置@page边距确实有效。
尽管在这些浏览器中为内容正确设置了页边距，但在试图解决页眉/页脚隐藏问题时，这种行为并不理想。

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

在Internet Explorer中，此打印设置中的边距实际上设置为0 mm，如果执行“预览”，则默认值为0 mm，但用户可以在预览中更改它。

您将看到页面内容实际上是正确 * 定位 * 的，但是浏览器打印页眉和页脚显示为非透明背景，因此有效地隐藏了该位置的页面内容。

在Firefox的新版本中，它的位置是正确的，但是页眉/页脚文本和内容文本都显示出来了，所以看起来像是浏览器页眉文本和页面内容的错误混合。
在Opera中，当在标准css中使用非透明背景时，页面内容会隐藏页眉，并且页眉/页脚位置与内容冲突。非常好，但如果边距设置为一个小值，导致页眉部分可见，看起来会很奇怪。此外，页面边距设置不正确。
在Chrome的更新版本中，如果@page边距设置得太小，以至于页眉/页脚位置与内容冲突，浏览器页眉和页脚就会隐藏。在我看来，这正是它应该做的。

因此，结论是Chrome在隐藏页眉/页脚方面实现得最好。

赞(0）回复(0）举报 2023-02-06

csga3l582#

任何最新版本的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属性，以防止打印URL、页码和Firefox添加到页边距的其他内容。
它可以在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也是如此;根据@LuizPerez的评论，Safari的最新版本（8、9.1和10）仍然不支持@page来隐藏边距文本。
我在Edge上找不到任何内容，并且没有Windows 10安装可供测试。

赞(0）回复(0）举报 2023-02-06

ftf50wuq3#

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

赞(0）回复(0）举报 2023-02-06

qrjkbowd4#

我有一个类似的请求，来自一个客户，他想删除页眉、页码和html页脚。在这种情况下，客户呈现的是一个HTML页面，它可以兼作正式证书。添加的URL、页面和页眉是无关紧要的，并导致最终产品不那么令人满意。在某些方面，它只是看起来很便宜。
Media = Print一直无法禁用这些浏览器默认设置。唯一的解决办法是告诉用户点击"齿轮"按钮，并切换这些项目的打开/关闭。说真的，我不知道我可以这样做了20年（我们认为典型的用户会有一个线索，点击切换按钮？）
如果CSS支持Media = Print，那么它应该支持控制整个最终用户打印体验的能力。我很欣赏浏览器提供的附加字段，但是，为什么不允许CSS控制整个打印体验呢？如果这是所需的话。如果再增加三个字段，90%的解决方案可能是100%!一个简单的：

#BrowserPrintDefaults{display:none}

就足够了。
同样，最终用户是否希望将其打印出来并不重要（也许你的客户非常隐私，不希望打印出来的URL四处浮动。或者也许一个执行团队使用私人协作网站？）很高兴为最终用户辩护，但如果有人在寻求答案，不要回答说这是最终用户的权利，有时候是客户支付账单的权利。

赞(0）回复(0）举报 2023-02-06

bvuwiixz5#

试试这个代码，工程100%为我：

用于****横向：

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

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

</style>
</head>

用于*端口：**

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

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

</style>
</head>

赞(0）回复(0）举报 2023-02-06

tuwxkamq6#

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

赞(0）回复(0）举报 2023-02-06

1szpjjfi7#

既然你提到了“在他们的浏览器中”和firefox，如果你使用的是Internet Explorer，你可以通过临时设置注册表中的值来禁用页眉/页脚，请看这里的例子。AFAIK我还没有听说过在其他浏览器中这样做的方法。丹尼尔和Mickel的答案似乎相互冲突，我猜在注册表的某个地方可能有一个类似的设置，可以让firefox删除页眉/页脚或者自定义它们，你检查过了吗？

赞(0）回复(0）举报 2023-02-06

ryevplcw8#

我解决了我的问题，使用一些css到网页。

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

赞(0）回复(0）举报 2023-02-06

2skhul339#

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

赞(0）回复(0）举报 2023-02-06

我来回答

css 是否从页面禁用浏览器打印选项(页眉、页脚、边距)？

9条答案

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

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

对于Firefox up to 48 alpha 1版本

其他浏览器

相关问题

热门标签

最新问答