CSS 打印布局正在添加一个额外的页面



我一直在为客户处理打印页面。玩了一会儿后,我发现我得到了一个额外的空白页。不寻常的是,如果我在 Web 开发人员中为 chrome 选择"大纲块级元素",多余的页面就会消失。这是目前在该页面上使用的所有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 结尾,但由于某种原因,我仍然得到一个额外的空白页。

会不会在某处只增加了 1 个像素?由于您将页面定义为使用完整的 270 毫米高度。即使是一个边距/填充/边框也会添加一个新页面。

如果减小此值,还会发生这种情况吗?如果没有,那么我建议你从这个值中去掉一点点(无论如何你不要使用全高。您可以向.print_A4添加page-break: after,以防止下一页占用上一页剩余的少量空间。

回答得很晚,但我认为我的贡献可以帮助遇到与使用 CSS 设置打印页面相同的问题的人:

创建一个动态的HTML内容并将其附加到body元素中,目的是只打印这样的内容,我意识到只有Chrome(版本46)和Opera(版本32)在打印开始时创建一个额外的空白页,这只发生在内容高度大于页面高度时。@mewiki提供的解决方案解决了我一个为期 2 天的研究和测试问题。

事实上,Chrome和Opera似乎有默认的边距,并设置了以下规则:

body {
    margin: 0 0 0 0;
}

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

老问题,但对于有同样问题的人来说,这是我为我修复它的解决方案。

我发现正文的底部边距必须明确设置为零(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">开始,并在那里设置页边距,使页面看起来不错。

所以因为 27.9cm 变成了类似 1423.03px 的东西,我怀疑它导致打印渲染器显示额外的像素。将其添加到我的页面解决了这个问题。

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

适用于处理多个页面的任何人。我按部分添加了每个页面内容,然后使用了这个:

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

我遇到了类似的问题,即引入分页符导致空白页。

没有足够的声誉来评论wiredolphin的帖子,但是使用该建议,以下内容对我有用

html, body {
  margin: 0 0 0 0;
  height: 99% !important;
}
.page {
  height: 100vh;
  page-break-after: always;
}

我知道这并不能回答原始海报的问题,但它已经很老了,这可能会对某人有所帮助。

另外,谢谢有线海豚!你把我引向了正确的方向。

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

我遇到了同样的问题,Neograph734的回答给了我一个重要的提示。

我也得到了额外的空白页,唯一对我有用的就是将此规则添加到我的 css 中(用于打印)

*
{
    box-sizing: border-box;
}

然后,我不再需要担心在使用边距,填充或边框时添加额外的像素。

一旦我添加了该规则,我只需要调整盒子的位置,一切都完美无缺。

最新更新