javascript - 无法通过 CSS 设置自定义纸张尺寸

Question

我尝试在浏览器中打印之前设置我的自定义纸张尺寸。这是我的简单示例:

window.print();

body {
margin:0;
}
div {
width:210mm;
height:50mm;
border:1px solid #000;
}
@media print {
  @page {
    size:210mm 50mm;
  }
}

<div></div>

由于 div 有 210 毫米，它应该被拉伸(stretch)到纸张的整个宽度，但它没有(至少在我的 Chrome 打印窗口中使用“Microsoft Print to PDF”打印机)。据我所知，我仍然有标准的 A4 纸，只有横向纸。

如何解决问题？

Answer 1

在 @page 选择器中添加 margin: 0;。

(我还更改了 div 的样式，以便边框包含在尺寸中。)

注意:这对于实际的打印机是不可能的。它仅适用于“打印为 PDF”或类似选项。在 Chrome 77 中测试。

window.print();

body {
  margin: 0;
}

div {
  width: 210mm;
  height: 50mm;
  border: 10px solid #000;
  box-sizing: border-box;
  padding: 8px;
}

@media print {
  @page {
    size: 210mm 50mm;
    margin: 0;
  }
}

<div>
  <b>Lorem Ipsum</b> is simply dummy text of the printing and
  typesetting industry. Lorem Ipsum has been the industry's
  standard dummy text ever since the 1500s, when an
  unknown printer took a galley of type and scrambled
  it to make a type specimen book.
</div>