Question

我一直在为客户打印页面。玩了一会儿后，我发现我得到了一个额外的空白页面。不寻常的是，如果我在Web Developer中为chrome选择“Outline Block Level Elements”，额外的页面就会消失。这是该页面上正在使用的所有CSS：

@page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    body 
    {
        background-color:#FFFFFF; 
        height: 296mm;
        border: 1px solid black;
        margin: 0px;  /* this affects the margin on the content before sending to printer */
   }

.print_A4 {
margin: 0mm;
padding: 0mm;
height: 270mm; /*A4 Size*/
width: 210mm; /*A4 Size*/
}

.A4_content {
    margin-left: auto;
    margin-right: auto;
    margin-top: 44mm;
    height: 210mm;
    width: 165mm;
 }

我做了很多谷歌搜索，但我看不到任何与此相关的内容。正文边框清楚地显示了在第一页结束之前结束的div，但由于某种原因，我仍然会得到一个额外的空白页。

Answer 1

是否有某些地方只添加了1个像素？由于您将页面定义为使用完整的270 mm高度。即使一个边距/填充/边框也会添加新页面。

如果减少此值，是否还会发生？如果没有，那么我建议你从这个值上取一点点（你还是不要使用全高度。）你可以将page-break: after添加到.print_A4以防止下一页占用剩余的小空间在上一页。

Answer 2

答案很晚，但我认为我的贡献可以帮助我遇到同样问题的人使用CSS来设置打印页面：

创建动态html内容并将其附加到body元素以仅打印此类内容，我意识到只有Chrome（版本46）和Opera（版本32）在打印时创建一个额外的空白页面，这仅在内容高度大于页面高度时发生。 @mewiki提供的解决方案解决了我2天的研究和测试问题。

确实Chrome和Opera似乎有默认的边距，并设置了以下规则：

body {
    margin: 0 0 0 0;
}

解决了其他浏览器未遇到的令人沮丧的行为。

Answer 3

老问题，但对于遇到同样问题的人来说，我的解决方案是为我修复的。

我发现身体的边缘底部必须明确设置为零（Chrome和Safari似乎有默认边距）。

body
{
    margin: 0px 0px 0px 0px; 
}

div.page {
  margin: 10px 10px 10px 10px; 
  page-break-before: none;
  page-break-after: none;
  page-break-inside: avoid;
}

每个要打印的页面都以<div class="page">开头并设置页边距，以便页面看起来不错。

Answer 4

因此，因为27.9厘米变成了1423.03px之类的东西，所以我怀疑这导致打印渲染器显示了另一个像素。将此添加到我的页面即可解决此问题。

.page-a4 {
  width: 21cm;
  height: calc(27.9cm - 1px);
}

Answer 5

我遇到了类似的问题，其中引入分页符导致空白页。

我没有足够的声誉来评论wiredolphin的帖子，但是根据那个建议，以下内容对我有用

html, body {
  margin: 0 0 0 0;
  height: 99% !important;
}

.page {
  height: 100vh;
  page-break-after: always;
}

我知道这不能回答原始发帖人的问题，但是它已经很老了，可能会对某人有所帮助。

另外，感谢wiredolphin！你带领我朝着正确的方向前进。

Answer 6

适用于处理多个页面的任何人。我在各节中添加了每个页面的内容，然后使用了它：

section {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

Answer 7

@page {
    size: auto;   /* auto is the initial value */
    margin: 12px;  /* this affects the margin in the printer settings */
}

CSS Print布局正在添加额外的页面

7 个答案: