Chrome打印预览与实际打印效果不一致，Angular打印样式问题求助

我有一个Angular项目，页面包含文本和表格，通过window.print()触发打印，目标是让表格横向完整打印，和网页显示完全一致。目前遇到的问题是：Chrome打印预览显示正常，但实际打印时纸张左右两侧出现裁剪，尝试过重置全局边距等样式仍无效。

现有代码 #

打印触发方法 #

printPage() {
  window.print();
}

初始打印样式 #

@media print {
  @page {
     size: landscape;
     margin: 0;
  }
}

无效的尝试样式 #

@media print {
  * {
    margin: 0 !important;
    padding: 0 !important;
  }
  html,
  body {
    height: 100%;
    overflow: visible;
  }
}

可行解决方法 #

1. 适配打印机可打印区域 #

打印机存在默认的不可打印边距，设置margin:0会导致内容超出这个区域，调整边距并限制内容宽度：

@media print {
  @page {
    size: landscape;
    margin: 1cm; /* 保留安全边距，避免超出打印机限制 */
  }

  body, .print-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  table {
    width: 100% !important;
    table-layout: fixed; /* 固定布局防止列宽溢出 */
  }
}

2. 强制内容适配打印宽度 #

如果表格列宽固定，可通过缩放微调，或禁用浏览器的自动缩放：

• 在Chrome打印对话框中取消勾选「缩放以适应」选项
• 或者通过CSS强制缩放比例（根据实际情况调整）：

@media print {
  html {
    zoom: 0.95;
  }
}

3. 清理组件容器额外间距 #

检查Angular组件的根容器是否有默认的padding/margin，在打印样式中重置：

@media print {
  app-print { /* 替换成你的组件选择器 */
    padding: 0 !important;
    margin: 0 !important;
  }
}

内容的提问来源于stack exchange，提问作者Timuçin Çiçek