CSS设置A4纸张大小

Question

我需要在网页中模拟A4纸张，并允许在浏览器（特别是Chrome）上按照所显示的方式打印这个页面。我将元素大小设置为21cm x 29.7cm，但当我发送打印请求（或打印预览）时，页面被剪裁了。

请参考此实例！

body {
  margin: 0;
  padding: 0;
  background-color: #FAFAFA;
  font: 12pt "Tahoma";
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.page {
  width: 21cm;
  min-height: 29.7cm;
  padding: 2cm;
  margin: 1cm auto;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.subpage {
  padding: 1cm;
  border: 5px red solid;
  height: 256mm;
  outline: 2cm #FFEAEA solid;
}

@page {
  size: A4;
  margin: 0;
}

@media print {
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}

<div class="book">
  <div class="page">
    <div class="subpage">Page 1/2</div>
  </div>
  <div class="page">
    <div class="subpage">Page 2/2</div>
  </div>
</div>

我觉得我忘了什么东西。但是那会是什么呢？

• Chrome: 剪辑页面，双页（正是我需要它工作的方式）
• Firefox：完美运行。
• IE10：信不信由你，它是完美的！
• Opera：打印预览非常有问题。

- David Rodrigues

---

正确答案在这里：https://dev59.com/xmYs5IYBdhLWcg3wFP54#34018790 - unom

可能是重复的问题：https://dev59.com/P3A75IYBdhLWcg3wW3oZ - Mark Boulder

关于此问题的错误报告。 - Eugen Konkov

Answer 1

我进一步调查了一下，实际问题似乎是在print媒体规则下将initial赋值给页面width。在Chrome中，如果没有为任何父元素的width定义特定的长度值，则.page元素上的width: initial会导致页面内容缩放（在这种情况下，width: initial解析为width: auto...但实际上，任何小于@page规则下定义的大小的值都会导致相同的问题）。

因此，不仅内容现在对于页面来说太长了（大约2cm），而且页面内边距也会略微超过初始值2cm等等（似乎会将width: auto下的内容呈现为宽度为~196mm，然后将整个内容缩放到210mm的宽度，但奇怪的是，与任何小于210mm的宽度的内容应用完全相同的缩放因子)。

要解决这个问题，您可以在print媒体规则中简单地将A4纸张的宽度和高度分配给html，body或直接分配给.page，在这种情况下避免使用initial关键字。

DEMO

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }
  /* ... the rest of the rules ... */
}

^{这似乎保持了你原始CSS中的所有内容，并修复了在Chrome中的问题（在Windows、OS X和Ubuntu下测试了不同版本的Chrome）。}

- Martin Turjak

---

嘿，@MartinTurjak，我修改了你的小互动程序，使它适应北美标准信纸大小，以防有人需要。 http://jsfiddle.net/2wk6Q/2957/干杯！ - Ben

对于空白打印页面的问题，只需删除 @media print { } 下面的所有 .page { } 类即可解决。那个类是完全不必要的。 - Thanasis

这个（至少是fiddle示例）在Chrome 92（MacOS 11.4）上似乎不再起作用了。我看到打印区域两侧有白色边距 :( - Matthew Herbst

Answer 2

CSS

body {
  background: rgb(204,204,204); 
}
page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
@media print {
  body, page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

HTML

<page size="A4"></page>
<page size="A4"></page>
<page size="A4"></page>

演示

- MD SHAHIDUL ISLAM

---

附注： <page> 不是有效的自定义HTML元素名称。 - Martin Schneider

看起来可以用。但是 box-shadow: 0; 在 Chrome 中不起作用，应该改为 box-shadow: none;。两个 margin 声明也可以合并为 margin: 0 auto 0.5cm;。 - Matias Kinnunen

Answer 3

https://github.com/cognitom/paper-css 看起来能够解决我所有需求。

让打印更愉快的纸张CSS

前端打印解决方案 - 可预览和实时重新加载！

- Mark Boulder