应用错误收集

HTML和CSS将打印页面大小设置为半角

时间：2018-07-02 05:37:13

标签： html css

我需要设置要使用半个字母大小的纸张（215毫米高和139毫米宽）打印的版面。我已经测试了许多css参数，例如

@page {
  size: 139mm 215mm;
  margin: 0;
}

@media print {
  @page {
    size: 139mm 215mm;
  }
}

html {
  width: 139mm;
  height: 215mm;
  margin: 0;
}

body {
  width: 139mm;
  height: 215mm;
  margin: 0;
}

<body>
  <div style="height: 215mm; width: 139mm; border:solid grey 1px;">
    <!-- My content -->
    ...
  </div>
</body>

但是当我使用Control + P打印时，总是会得到一个Legal垂直尺寸页面。

如何设置此自定义尺寸以在任何浏览器中打印？

1 个答案:

答案 0 :(得分：0)

除了定义size外，您还需要为height定义width和@page。我更新了您的代码并将其放在下面，希望能解决您的问题。

关键部分：

@page {
  size: 139mm 215mm;
  height: 215mm;
  width: 139mm;
  margin: 0;
}

摘要：

window.print();

@page {
  size: 139mm 215mm;
  height: 215mm;
  width: 139mm;
  margin: 0;
}

html {
  width: 139mm;
  height: 215mm;
  margin: 0;
}

body {
  width: 139mm;
  height: 215mm;
  margin: 0;
}

<body>
  <div style="height: 215mm; width: 139mm; border:solid grey 1px;">
    <!-- My content -->
    ...
  </div>
</body>

Updated JSFiddle