CSS：从打印预览 Chrome 中禁用页眉和页脚

Posted 2023-03-06

【中文标题】CSS：从打印预览 Chrome 中禁用页眉和页脚

【英文标题】：CSS: Disable Header & Footer From Print Preview Chrome

【发布时间】：2012-07-15 05:40:15

【问题描述】：

我的一个应用程序是基于网络的 POS（销售点）。所以在用 chrome 打印发票时。 浏览器自动插入的页眉和页脚，我想通过页面抑制，无需用户干预..

我在印刷媒体中应用了一些 CSS，

@media print 
 #header, #footer  
    visibility: hidden !important;
    display: none !important;
 

但它不适用，也许选择器不正确？

我也尝试减少边距，但如果打印有多个页面，它会剪切/覆盖页面内容。 还有一件事，我不想禁用 chrome 的打印预览选项..

任何人对此有很好的解决方案？

最好的问候..

【问题讨论】：

您的代码看起来不错，尽管visibility 是多余的。检查您的页脚和页眉是否有 id，与您在 css 选择器中使用的匹配。

实际上无法在打印预览时检查页眉和页脚的 id 或类...您能在您身边试试吗..？

大声笑，所以你的意思不是页眉和页脚，而是page header/footer？抱歉，您无法通过 css 隐藏它们，但您可以将页面转换为 pdf 或 doc，这样可以更好地控制打印，并将此文档发送到打印机。

它的 POS 机..所以每次取消选中页眉和页脚或创建 pdf 或 doc，然后触发打印按钮是不可行的。你有其他解决方案吗？

然后只需配置打印机，不打印页眉/页脚。所有浏览器都支持这个，afaik。并将此设置的更改添加到您的安装程序或部署手册中。

【参考方案1】：

使用

@pagemargin:0px auto;

在您的 CSS 脚本中。这很可能会在打印时破坏您的页面布局，因此您可能需要添加一个带有正确填充的#container div，以使您的页面再次看起来不错。仅在 Google Chrome 上测试。

【讨论】：

如果我可以多次支持这个答案，我会的。你是一个救生员。谢谢！！

如果您要打印多页，这将不起作用。

【参考方案2】：

。 .我不确定您在开发中的知识水平，但 CSS 选择器必须匹配某些元素。 [page] “header” 和 [page] “footer”，如“[printed] page”，而不是“[web] page”，不能像这样被 CSS 定位 - 特别是不能随意选择ID，以及可能与您自己的页面 ID 冲突且浏览器供应商永远不会接受实施的 ID。

。 .使用“margin: 0 auto;”的建议在“@page”指令上实际上是正确的（因为浏览器没有足够的余量来显示它们，它只会隐藏它们）。问题是目前只有 Chrome 正确支持它。对于其他浏览器，除了创建 PDF 并打印它之外，您没有其他好的选择。不过，您可以创建一个可自行打印的 PDF，它会在加载时使用嵌入在其上的 javascript 立即显示打印对话框，但我认为这是您能做到的最远距离。

。 .祝你好运。