CSS:禁用页眉&Chrome打印预览页脚

CSS: Disable Header & Footer From Print Preview Chrome

本文关键字：打印 Chrome CSS amp      更新时间：2023-09-26

我的一个应用程序是基于web的POS（销售点）。所以当用铬打印发票时。由浏览器自动插入的页眉和页脚，我想通过页面在没有用户干预的情况下支持它。。

我在打印介质中应用了一些CSS

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

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

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

有人能解决这个问题吗？

谨致问候。。

使用

@page{margin:0px auto;}

在css脚本中。这很可能会在打印时打乱页面布局，因此您可能需要添加一个带有正确填充的#containerdiv，以使页面再次看起来良好。仅在谷歌Chrome上测试。

。我不确定你在开发方面的知识有多渊博，但CSS选择器必须匹配一些元素。"[page]"header"和[page]"footer"，如在"[打印]页"中，而不是在"[网页]页"，CSS不能像那样针对它们——尤其是对于任意选择的ID，以及那些可能与您自己的页面ID冲突的ID，浏览器供应商永远不会接受实现这些ID。

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

祝你好运

相关文章：