如何避免打印时末尾有多余的空白页？

88

我正在使用CSS属性，

如果我使用page-break-after: always;=>它会在之前打印出一个额外的空白页

如果我使用page-break-before: always;=>，它将在以后打印额外的空白页。如何避免这种情况？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.print{
    page-break-after: always;

}
</style>
<script type="text/javascript">
window.print();
</script>
</head>
<body>
<div class="print">fd</div>
<div class="print">fdfd</div>
</body>
</html>
css  printing 
— 安吉林·纳达尔（Angelin Nadar）
source
印刷课的高度是多少？
— juankysmith
1
由于这是针对发票的，因此高度将根据项目数而变化。
— Angelin Nadar
4
这就是我们在冷战中的​​做法：<div>This page intentionally left blank.</div>
— 鲍勃·斯坦

Answers:

72

您也许可以添加

.print:last-child {
     page-break-after: auto;
}

因此最后一个print元素将不会获得额外的分页符。

请注意，如果您以浏览器的目标为目标，则IE8不支持：last-child选择器。

— AKX
source
88
可以将其确定为“不支持IE”是IE的dafault功能
— Angelin Nadar
对于其他读者来说，这对我不起作用，但是下面关于在HTML和body元素上设置自动高度的答案很吸引人。
— 科迪
101

你有试过吗

@media print {
    html, body {
        height: 99%;    
    }
}
— 詹尼斯·埃普
source
2
对我来说工作：@media print {html {高度：99％；}}，文档创建的主体更大
— Gustavo 2014年
10
就我而言，Zurb Foundation将html和body设置为height: 100%。我能够使用height: auto
— zacharydl
4
确认@zacharydl的评论对我height: auto;height: 99%;
— 有用
我遇到了这个问题，因为我将html高度设置为101％，以强制始终显示滚动条。（消除了页面之间的跳转）-是的，打印样式中100％的高度是不错的解决方法！-干杯
— rob_james
@rob_james为避免使用101％，可以设置溢出-y：始终使滚动条可见
— user161592 '16
46

这里描述的解决方案对我有所帮助（webarchive链接）。

首先，您可以在所有元素上添加边框，以查看导致添加新页面的原因（可能有空白，边距等）。

div { border: 1px solid black;}

解决方案本身就是添加以下样式：

html, body { height: auto; }
— Mikhail Radionov
source
9
哇，这是我的旧博客！我只是遇到了同样的问题，并以为我已经解决了这个曾经的^^小世界
— Miguel Stevens
3
加1用于添加div边框。
— Iftikhar Ali Ansari
添加边界真是个好主意！！它帮助我意识到页面包装上设置的最小高度导致了额外页面的出现。我有一段时间撞到这个头了。非常感谢！
— erichunt
33

如果这些都不起作用，请尝试此

@media print {

    html, body {
      height:100vh; 
      margin: 0 !important; 
      padding: 0 !important;
      overflow: hidden;
    }

}

确保它是100vh

— 陈柏霖
source
4
将高度设置为100vh解决了我的问题。谢谢
— user2398069
1
“ @media print {* {溢出：隐藏！重要；}}”对我来说非常重要。
— shinriyo
1
最后是一个晦涩问题的答案！OSX上的Safari显示的页面完全空白，而Chrome，FF和Edge的预览效果都很好。非常感谢！
— 流行
将高度设置为100vh似乎使其无法加载多个页面，因此，如果文档具有多个页面，则仅第一页加载到预览中
— Filipe
5

如果您只想使用CSS并希望避免分页，请使用 

.print{
    page-break-after: avoid;

}

看看分页媒体

您可以为pageBreakBefore和pageBreakAfter使用脚本等效项，以动态分配它们的值。例如，您可以创建一个脚本使此选项为可选，而不是强加给访问者自定义分页符。在这里，我将创建一个复选框，该复选框在切片页眉（h2）和打印机自行决定（默认）之间切换：

<form name="myform">
<input type="checkbox" name="mybox" onClick="breakeveryheader()">
</form>

<script type="text/javascript">
 function breakeveryheader(){
 var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
 for (i=0; i<document.getElementsByTagName("H2").length; i++)
 document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
 }

单击此处以获取使用此示例。您可以用其他标记（例如P或DIV）替换脚本中的H2。

http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

— bilash.saha
source
4

（目前不知道）为什么，但是这个帮助：

   @media print {
        html, body {
            border: 1px solid white;
            height: 99%;
            page-break-after: avoid;
            page-break-before: avoid;
        }
    }

希望有人在与问题作斗争时能挽救自己的头发...;）

— 亚当·G
source
4

似乎有很多可能的原因，可能的主题是body标签的最终高度由于w / e原因而被认为太大。

我的原因：min-height: 100%在基本样式表中。

我的解决方案：min-height: auto在@media print指令中。

请注意，auto根据PhpStorm的说法，这似乎不是正确的值。但是，根据Mozilla的min-height文档是正确的：

auto
弹性项目的默认最小大小，对于其他布局，它提供比0更合理的默认值。

— 乔治·玛丽安
source
我只是把'min-height：initial！important;' 它为我工作。
— 席比·托马斯
@SibyThomas我尽可能避免！important声明。这使得覆盖属性变得更加困难。我什至没有考虑，initial因为我认为动态调整大小的元素会出现问题。请注意，初始值为0，因此我仍然认为auto通常更有用。
— 乔治·玛丽安
3

display:none为所有其他不用于打印的元素设置。设置visibility:hidden将使它们保持隐藏状态，但是它们都仍然存在并且已经为它们占用了空间。空页用于那些隐藏的元素。

— Janaka R Rajapaksha
source
3

就我而言，为所有div设置宽度有助于： 

.page-content div {
    width: auto !important;
    max-width: 99%;
}
— 马里亚努斯
source
3

我有一个类似的问题，但是原因是因为我在页面底部有40px的页边距，所以即使最后一页有足够的空间，最后一行也总是会换行。不是因为任何类型的page-break-*css命令。我通过删除打印页边距进行修复，效果很好。只是想添加我的解决方案，以防其他人有类似的情况！

— 亚历克斯·莫利·芬奇
source
2

在为各种分页符设置和高度以及body标签上的一百万条CSS规则而苦苦挣扎之后，我终于在一年后解决了它。

我有一个div，它应该是要打印的页面上唯一的东西，但是在它之后我得到了几个空白页。我的身体标签设置为，visibility:hidden;但这还不够。垂直高的页面元素仍然占据“空间”。所以我在我的打印CSS规则中添加了以下内容：

#header, #menu, #sidebar{ height:1px; display:none;}

通过包含高页面布局元素的ID定位特定的div。我缩小了高度，然后将其从布局中删除。没有更多的空白页。多年后，我很高兴告诉客户我将其破解了。希望这对某人有帮助。

— 雪莉
source
是的，如果使用visibility: hidden;它仍会占用空间。如果使用display: none;空间将被删除。届时，您无需专门设置高度，只需FYI。
— chapeljuice
2

Chrome似乎存在一个错误，即在某些情况下，使用display：none在加载后隐藏元素会留下很多额外的空间。我猜想他们是在文档渲染完成之前计算文档高度。Chrome浏览器还会触发2个媒体更改事件，并且不支持onbeforeprint等。它们基本上是打印的对象。这是我的解决方法：

@media print {
    body {
        display: none;
    }
}

body.printing {
    display: block;
}

您在文档上准备了body class =“ printing”，即可启用打印样式。该系统可以实现打印样式的模块化以及浏览器中的打印预览。

— 飞船
source
1

将此CSS添加到同一页面以扩展CSS文件。

<style type="text/css">
   <!--
   html, body {
    height: 95%; 
    margin: 0 0 0 0;
     }
   -->
</style>
— 阿尔纳斯雷
source
1

我尝试了所有解决方案，这对我有用：

<style>
    @page {
        size: A4;
        margin: 1cm;
    }

    .print {
        display: none;
    }

    @media print {
        div.fix-break-print-page {
            page-break-inside: avoid;
        }

        .print {
            display: block;
        }
    }

    .print:last-child {
        page-break-after: auto;
    }
</style>
— 保罗·韦弗顿
source
1

我刚遇到一种情况，

    </div>
    <script src="addressofjavascriptfile.js"></script>
</body>
</html>

至

        <script src="addressofjavascriptfile.js"></script>
    </div>
</body>
</html>

解决了这个问题。

— 特里·霍纳（Terry Horner）
source
1 
.print:last-child{
    page-break-after: avoid;
    page-break-inside: avoid;
    margin-bottom: 0px;
}

这对我有用。

— 来宾
source
1

奇怪地设置透明边框为我解决了这个问题：

@media print {
  div {
    border: 1px solid rgba(0,0,0,0)
  }
}

也许在容器元素上设置边框就足够了。<-Untestet。

— 亚历克斯洛尔
source
0

没有一个答案对我有用，但是在阅读所有答案之后，我发现我要打印1个HTML页面的问题是什么，但是正在打印一个额外的白色空白页面。我正在使用AdminLTE Bootstrap 3主题来打印要打印的报告页面，并在其中将页脚标记放到该页面的右下角：

某人印制

我使用jquery放置了该文本，而不是之前的“ Copy Rights”页脚

$("footer").html("Printed by Mr. Someone");

默认情况下，主题中的标签页脚使用.main-footer类，该类具有以下属性

padding: 15px;
border-top: 1px solid

造成了额外的空白，所以在知道了问题之后，我有了不同的选择，最好的选择是使用 

$( "footer" ).removeClass( "main-footer" );

就在那个特定页面

— Yousef Al-Hadhrami
source
0

将您需要的内容放在div的页面上，并在该div上使用page-break-inside：avoid。您的div将停留在一页上，并在需要时进入第二页或第三页，但是如果下一个div必须进行分页，则下一个div应该从下一页开始。

— 里克·特纳
source
0

检查底部html标记后是否有空格。删除下面的空白帮助了我

— 华西
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.