如何使用 css 将打印机的页面设置为 A4 尺寸？答案

【问题标题】：How to set page to A4 size for printer using css?如何使用 css 将打印机的页面设置为 A4 尺寸？
【发布时间】：2018-11-12 08:43:28
【问题描述】：

如何使用 css 将打印机的页面设置为 A4 尺寸？

这是我测试时的代码。您将在 2 A4 纸页中看到字词 test。

但是当我按下Ctrl+p 键盘时，它的显示是这样的。

为什么不打印 2 页。

    <style type="text/css">
    .A4 {
      background: white;
      width: 21cm;
      height: 29.7cm;
      display: block;
      margin: 0 auto;
      padding: 10px 25px;
      margin-bottom: 0.5cm;
      box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
      overflow-y: scroll;
      box-sizing: border-box;
    }
    
    @media print {
      .page-break {
        display: block;
        page-break-before: always;
      }
    
      size: A4 portrait;
    }
    
    @media print {
      body {
        margin: 0;
        padding: 0;
      }
    
      .A4 {
        box-shadow: none;
        margin: 0;
        width: auto;
        height: auto;
      }
    
      .noprint {
        display: none;
      }
    
      .enable-print {
        display: block;
      }
    }
    </style>
    
    <div class="A4">
    test
    </div>
    
    <div class="A4">
    test
    </div>

我该怎么办？

【问题讨论】：

因为您在类 page-break 的元素上指定 page-break-before，而它在您的 DOM 中不存在。

标签： css printers

【解决方案1】：

你有一个.page-break 类，但你没有使用它。

<style type="text/css">
  @media print {
    body {
      margin: 0;
      padding: 0;
    }
    .A4 {
      margin: 0;
      background: white;
      width: 21cm;
      height: 29.7cm;
    }
    .noprint {
      display: none;
    }
    .enable-print {
      display: block;
    }
    .page-break {
      page-break-before: always;
    }
  }
</style>

<div class="A4 enable-print">
  test
</div>

<div class="A4 enable-print page-break">
  test
</div>

<div class="noprint">
  won't be printed
</div>

【讨论】：

第三页我必须使用A4 page-break类？
您不必这样做。仅在您要拆分到新页面的每个 .A4 页面上使用它。我的示例中的第 3 页不会打印，因此使用 .page-break 类没有意义。