打印时如何避免在结束时出现额外的空白页？

我在使用 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>
183879 次浏览
小开

如果你只是想使用 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
}

单击 here获取使用此。您可以在脚本中用另一个标记(例如 P 或 DIV)替换 H2。

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

小开
最佳答案

You could maybe add

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

所以最后一个 print元素不会得到额外的分页符。

请注意: 最后一个子选择器不支持在 IE8，如果你的目标是一个可怜的浏览器。

小开

你试过这个吗？

@media print {
html, body {
height: 99%;
}
}
小开

这对我有用

.print+.print {
page-break-before: always;
}
小开

为所有其他不用于打印的元素设置 display:none。 设置 visibility:hidden将保持他们隐藏，但他们都仍然存在，并已为他们采取的空间。空白页面是为那些隐藏的元素准备的。

小开

解决方案描述 给你帮助我(互斥链接互斥链接)。

First of all, you can add border to all elements to see what causes a new page to be appended (maybe some margins, paddings, etc).

div { border: 1px solid black;}

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

html, body { height: auto; }
小开

在与各种页面分割设置和高度以及 body 标签上的上百万种 CSS 规则作斗争之后，我终于在一年之后解决了这个问题。

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

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

通过包含高页面布局元素的 id 来定位特定的 div。我缩小了高度，然后把它们从布局中移除了。再也没有空白页了。几年后，我很高兴地告诉我的客户，我破解了它。希望这对谁有帮助。

小开

不知道为什么(至少现在是这样) ，但下面这个例子起到了作用:

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

希望有人在解决这个问题的时候能挽救他的头发... ;)

小开

似乎有很多可能的原因，可能的主题是，身体标签结束了一个高度，被认为是太大的原因。

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

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

注意，根据 PhpStorm 的数据，auto似乎不是一个正确的值，但是根据 Mozilla 的 最小高度文件数据，它是正确的:

奥托
Flex 项的默认最小大小，为其他布局提供了比0更合理的默认大小。

小开

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

<style type="text/css">
<!--
html, body {
height: 95%;
margin: 0 0 0 0;
}
-->
</style>
小开

在我的例子中，为所有 div 设置宽度有所帮助:

.page-content div {
width: auto !important;
max-width: 99%;
}
小开

我尝试了所有的解决方案，这对我很有效:

<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>
小开

Chrome 似乎有一个 bug，在某些情况下，隐藏元素后加载显示: 无，留下了很多额外的空间后面。我猜他们是在文档渲染完成之前计算文档高度。Chrome 还会触发2个媒体更改事件，并且不支持 before print 等。它们基本上就是印刷的工具。我的解决办法是:

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


body.printing {
display: block;
}

在 doc ready 上给 body class = “ print”，这样就可以启用打印样式。该系统允许模块化打印样式，并在浏览器中打印预览。

小开

我刚遇到一个案子

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

到

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

解决了这个问题。

小开

更改了打印区域的 css 显示和宽度属性

#printArea{
display:table;
width:100%;
}

小开

如果这些都不管用，试试这个

@media print {


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


}

确保是100伏特

小开

没有一个答案对我有用，但是在阅读了所有的答案之后，我发现了我的问题所在 我有1个 HTML 页面，我想打印，但它打印与它一个额外的白色空白页。 我正在使用 AdminLTE 为报告页面打印引导3主题，并在其中的页脚标记，我想把这个文本的页面右下角:

某人先生印刷的

我使用 jquery 来放置该文本，而不是前面的“ CopyRights”页脚

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

默认情况下，标记页脚使用 class. main-footer 它具有

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

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

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

就在那一页

小开 
.print:last-child{
page-break-after: avoid;
page-break-inside: avoid;
margin-bottom: 0px;
}

这招对我很管用。

小开

奇怪的是，透明边界的设置为我解决了这个问题:

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

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

小开

我有一个类似的问题，但原因是因为我有40像素的页边距在页面底部，所以最后一行总是包装，即使有它的空间在最后一页。不是因为任何类型的 page-break-* css 命令。我通过删除打印的边距来修正，它工作得很好。只是想添加我的解决方案，以防其他人有类似的东西！

小开

把你需要的东西放在一个 div 页面上，然后使用 page-break-inside: 避免放在那个 div 页面上。 您的 div 将停留在一个页面上，如果需要，将进入第二个或第三个页面，但下一个 div，如果它必须进行分页，应该从下一个页面开始。

小开

检查是否有任何空白后的 html 标签在底部。删除任何空白下面帮助我

小开

首先，通过浏览器的 devtools 模拟打印样式表。

然后你需要寻找额外的填充、边距、边框等等，这些可以将你的页面尺寸扩展到8.5英寸 x11英寸以外。特别注意空白，因为这将是不可能通过打印预览对话框检测。如果有不应该出现的空白，右键单击并检查光标下的元素应该会突出显示该问题(除非是边距导致的)。

小开

在我的例子中，额外的页面问题是由页面上的 table元素引起的。我尝试了这里提供的许多解决方案，但是为了解决这个问题，我必须将 table css 改为:

table {
width: 99%;
height: 99%;
}
小开

我也得到了一个额外的空间下面/上面取决于我是否使用

page-break-after: always; or page-break-before: always;

我所做的是 < strong > 删除我应用的元素的高度和边框 分页后或分页前

这有助于我删除额外的一页。

例如:

/*The element to which we apply page break*/
<div class="page-break-line"></div>

内部风格:

<style>
.page-break-line{
/**Make sure you don't give any height,border. Because giving them gives an
extra page.
*/
visibility: hidden;
}




@media print {
/*This is the important to add page break!*/
.page-break-line {
page-break-before: always !important;
}
}
</style>

注意: 一个带分页线的 div 保存在我需要分别打印的每一行的下面。

小开

我不能看到我的解决方案张贴在这里的任何答案，所以这里也是我的，我想。

首先，如果你不知道这个把戏，它会有帮助。你可以和检查员一起预览打印页面。点击右上角的三个点，然后“更多工具-> 渲染”，现在导航到渲染选项卡，你可以模拟 CSS 媒体类型“打印”。非常有用！

我采纳了@Michael Radionovs 的建议，在我所有的元素上添加了一个边框。我给了 html，main，body 不同的边框颜色，我注意到我的 html 和 body 在最后包围了我不想要的额外页面。

设置 html body { height: auto; }或 html body { height: 99% ; }的技巧对我来说不起作用，但是设置

html, body { height: max-content }

为我的一些印刷版工作。

其他一些似乎引起问题的东西是填充底部或边距底部应用到我的容器元素。这将 html、 body 和 main 标记推出了页面边界，并创建了一个新页面。所以重置这些属性值也要使用

main, .master, .content { margin: 0; padding: 0 }

在我剩下的印刷页面上工作。

小开 
@media print {
.print-page {
display: block;
height:900px;
}
}
小开

在我的例子中，我给一个边距顶部一个导致空白页面打印问题的 div，我删除了那个边距，问题就消失了。

小开

我还得到了额外的空白页面，唯一对我有效的方法就是将这个规则添加到我的 css 中(用于打印)

*
{
box-sizing: border-box;
}

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

一旦我添加了这个规则，我只需要调整盒子的位置，所有的工作都完美无缺。


提交答案