如何在Chrome中仅打印POS发票页面的中心收据区域（去除页面边距）

我完全懂你现在的烦恼——用Chrome打印时总是连带着整个页面的多余边距一起打出来，而你只想精准打印那个POS收据的核心区域。别着急，咱们可以通过调整CSS的打印专属样式来搞定这个问题，下面是具体的操作步骤：

核心解决方案：修改打印媒体查询样式 #

原来的打印样式只处理了分页，我们需要扩展它来隐藏页面其他内容、消除多余边距。把你代码里的@media print块替换成下面这段：

@media print {
  /* 先把页面上所有内容默认隐藏 */
  body * {
    visibility: hidden;
  }
  /* 只让收据容器及其内部所有元素可见 */
  #invoice-POS, #invoice-POS * {
    visibility: visible;
  }
  /* 将收据定位到打印页面的左上角，彻底消除默认边距 */
  #invoice-POS {
    position: absolute;
    left: 0;
    top: 0;
    box-shadow: none; /* 打印时阴影没必要，还会占额外空间 */
    margin: 0;
    padding: 0; /* 如果需要完全去除内边距，就加这行；要保留一点的话改成你需要的数值 */
    /* 如果你想保持收据的固定宽度44mm，可以保留下面这行，否则换成width:100% */
    width: 44mm;
  }
  /* 保留原有的分页规则（如果有多页收据需求的话） */
  .page-break { 
    display: block; 
    page-break-before: always; 
  }
}

为什么这样做？ #

• body * { visibility: hidden; }：先把页面上所有元素都隐藏，确保只有我们指定的区域会被打印。
• #invoice-POS, #invoice-POS * { visibility: visible; }：单独把收据容器和它里面的内容重新设为可见，精准锁定打印区域。
• 绝对定位+left/top:0：让收据紧贴打印页面的左上角，消除Chrome默认的页面边距。
• 去掉阴影、重置margin和padding：避免这些样式在打印时产生多余的空白区域。

Chrome打印设置的额外优化 #

修改完CSS后，在Chrome的打印对话框里还要做这两步：

• 把边距选项设置为「无」
• 取消勾选「背景图形」（如果不需要打印背景相关的样式）

这样调整后，你再看打印预览，就只会显示你想要的收据部分，没有多余的页面边距了。

备注：内容来源于stack exchange，提问作者Chaitanya Prakash