Question

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

window.print();

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

<div></div>

由于div的宽度为210mm，因此应该将纸张的整个宽度拉伸，但不能拉伸（至少在我的Chrome的“ Microsoft Print to PDF”打印机的打印窗口中）。因此，据我了解，我仍然有标准的A4纸，只是横向纸。

如何解决问题？

Answer 1

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

（我还更改了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>

Answer 2

尝试一下

@page {
  size: 210mm 70mm;
  margin: 1;
}

window.print();

body {
  margin: 0;
}

div {
  width: 210mm;
  height: 50mm;
  border: 1px solid #000;
}

@media print {
  @page {
    size: 210mm 70mm;
    margin: 1;
  }
}

<div></div>

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

2 个答案: