CSS：禁用标题＆amp;来自打印预览Chrome的页脚

Question

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

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

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

但它没有应用，也许选择器不正确？

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

任何人都有这个好的解决方案吗？

最诚挚的问候..

Answer 1

使用

@page{margin:0px auto;}

在你的css脚本中。这很可能会在打印时抛弃页面布局，因此您可能希望添加带有正确填充的#container div，以使页面再次显示正常。仅在Google Chrome上测试过。

Answer 2

。 。我不确定你在开发方面的知识水平，但CSS selectores必须匹配一些元素。 [页面]“页眉”和[页面]“页脚”，如“[打印]页面”，而不是“[网页]页面”，不能像那样被CSS作为目标 - 特别是不能随意选择ID，以及可能与您自己的页面ID冲突的ID以及浏览器供应商永远不会接受实施的ID。

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

。 。祝你好运。