打印时如何避免最后出现多余的空白页？
Posted
技术标签:
【中文标题】打印时如何避免最后出现多余的空白页？【英文标题】：how to avoid extra blank page at end while printing? 【发布时间】：2011-12-12 09:06:12 【问题描述】：我正在使用 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>
【问题讨论】：
打印类的高度是多少？ 因为这是针对发票的，所以高度将根据物品数量而变化。 这就是我们在冷战时期的做法：<div>This page intentionally left blank.</div>
【参考方案1】：
如果你只是想使用 CSS 并且想避免分页符，那么使用
.print
page-break-after: avoid;
看看paged media
您可以为 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 获取使用此功能的示例。您可以将脚本中的 H2 替换为另一个标记，例如 P 或 DIV。
http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml
【讨论】：
【参考方案2】：你可以添加
.print:last-child
page-break-after: auto;
所以最后一个print 元素不会得到额外的分页符。
请注意 :last-child 选择器在 IE8 中不受支持，如果您的目标是浏览器的那个坏蛋。
【讨论】：
“IE 不支持”是 IE 的默认功能就可以了 对于其他读者来说，这对我不起作用，但下面的在 HTML 和 body 元素上设置自动高度的答案就像一个魅力。【参考方案3】：你试过了吗？
@media print
html, body
height: 99%;
【讨论】：
为我工作：@media print html height: 99%; ，创建的文档的正文更大 在我的例子中，Zurb Foundation 将 html 和 body 设置为height: 100%。我可以用height: auto 覆盖它
确认@zacharydl 的评论对我有用，而且height: auto; 比height: 99%; 更优雅
我遇到了这个问题，因为我将 html 高度设置为 101% 以强制滚动条始终显示。 （消除页面之间的跳转） - 所以，是的，打印样式的 100% 高度是一个很好的修复！ - 干杯。
至今仍在工作！【参考方案4】：
这对我有用
.print+.print
page-break-before: always;
【讨论】：
这对我来说比其他人更有效！更多信息：blog.jonesed.net/2012/10/…【参考方案5】：为所有其他不用于打印的元素设置display:none。
设置visibility:hidden 将使它们保持隐藏，但它们都仍然存在并为它们占用了空间。空白页面用于那些隐藏的元素。
【讨论】：
谢谢，如果您有动态内容，您可以使用:not 选择器将所有内容设置为display: none，但不能设置打印类，例如body > :not(.print) display: none !important; 【参考方案6】：
here 描述的解决方案帮助了我 (webarchive link)。
首先，您可以为所有元素添加边框，以查看导致新页面被追加的原因（可能是一些边距、填充等）。
div border: 1px solid black;
解决方案本身就是添加以下样式：
html, body height: auto;
【讨论】：
哇，这是我的旧博客！我只是遇到了同样的问题，并认为我已经解决了一次 ^^ 小世界 加 1 用于添加 div 边框。 添加边框真是个好主意！它帮助我意识到在我的页面包装器上设置了一个最小高度，导致出现额外的页面。我用头撞了一会儿。非常感谢！【参考方案7】：在与各种分页符设置和高度以及 body 标签上的一百万种 CSS 规则作斗争之后，一年多后我终于解决了。
我有一个 div，它应该是页面上唯一可以打印的东西，但在它之后我得到了几个空白页。
我的身体标签设置为visibility:hidden;，但这还不够。垂直高的页面元素仍然占用“空间”。所以我在我的打印 CSS 规则中添加了这个：
#header, #menu, #sidebar height:1px; display:none;
通过包含高页面布局元素的 id 来定位特定的 div。我缩小了高度，然后将它们从布局中删除。没有更多的空白页。多年后，我很高兴地告诉我的客户我破解了它。希望这对某人有所帮助。
【讨论】：
是的，如果您使用visibility: hidden;，它仍然会占用空间。如果您使用display: none;，空格将被删除。那时您不需要专门设置高度，仅供参考。【参考方案8】：
不知道（至于现在）为什么，但这个帮助：
@media print
html, body
border: 1px solid white;
height: 99%;
page-break-after: avoid;
page-break-before: avoid;
希望有人在与问题作斗争时拯救他的头发...... ;)
【讨论】：
【参考方案9】：似乎有很多可能的原因，可能的主题是body标签最终的高度由于w/e原因被认为太大。
我的原因：min-height: 100% 在基本样式表中。
我的解决方案：min-height: auto 在 @media print 指令中。
请注意，根据 phpStorm，auto 似乎不是一个正确的值。不过根据Mozilla的documentation on min-height是正确的：
自动 flex 项的默认最小尺寸，为其他布局提供比 0 更合理的默认值。
【讨论】：
我只是把'min-height:initial !important;'它对我有用。 @SibyThomas 我尽可能避免使用 !important 声明。它使覆盖属性变得更加困难。我什至没有考虑过initial，因为我认为动态大小的元素会出现问题。注意初始值为0，所以我还是假设auto一般比较有用。【参考方案10】：
将此css添加到同一页面以扩展css文件。
<style type="text/css">
<!--
html, body
height: 95%;
margin: 0 0 0 0;
-->
</style>
【讨论】：
【参考方案11】：在我的情况下，为所有 div 设置宽度有帮助：
.page-content div
width: auto !important;
max-width: 99%;
【讨论】：
【参考方案12】：我尝试了所有解决方案，这对我有用：
<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>
【讨论】：
【参考方案13】：Chrome 似乎有一个错误，在某些情况下，使用 display:none 隐藏加载后的元素会留下很多额外的空间。我猜他们是在文档完成渲染之前计算文档高度。 Chrome 还会触发 2 个媒体更改事件，并且不支持 onbeforeprint 等。它们基本上是打印的 ie。这是我的解决方法：
@media print
body
display: none;
body.printing
display: block;
您在文档准备好时提供 body class="printing" ，这将启用打印样式。该系统允许对打印样式进行模块化，并在浏览器中进行打印预览。
【讨论】：
这解决了我的问题。我正在打印 IMG 并将样式设置为“显示：块；”阻止了第二个空白页。【参考方案14】：我刚刚遇到一个从
</div>
<script src="addressofjavascriptfile.js"></script>
</body>
</html>
到
<script src="addressofjavascriptfile.js"></script>
</div>
</body>
</html>
修复了这个问题。
【讨论】：
【参考方案15】：我更改了打印区域的css显示和宽度属性
#printArea
display:table;
width:100%;
【讨论】：
【参考方案16】：如果这些都不起作用，试试这个
@media print
html, body
height:100vh;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
确保它是 100vh
【讨论】：
将高度设置为 100vh 解决了我的问题。谢谢 "@media print * overflow: hidden!important; " 对我来说非常重要。 一个晦涩的问题终于有了答案！ OSX 上的 Safari 显示一个完全空白的页面，而 Chrome、FF 和 Edge 的预览效果都很好。非常感谢！ 将高度设置为 100vh 似乎会阻止它加载超过一页，因此如果文档有多个页面，则仅在预览中加载第一页 谢谢兄弟拯救我的一天：+1：【参考方案17】：没有一个答案对我有用，但是在阅读了所有答案后，我发现了我的问题所在 我有 1 个要打印的 Html 页面，但它正在打印一个额外的白色空白页。 我正在使用 AdminLTE 一个 bootstrap 3 主题来打印报告的页面，并在其中的页脚标签中我想将此文本放置在页面的右下角：
某人先生打印
我使用 jquery 来放置该文本而不是之前的“版权”页脚
$("footer").html("Printed by Mr. Someone");
默认情况下，主题中的标签页脚使用 .main-footer 类 有哪些属性
padding: 15px;
border-top: 1px solid
这导致了一个额外的空白，所以在知道这个问题之后，我有不同的选择，最好的选择是使用
$( "footer" ).removeClass( "main-footer" );
就在那个特定的页面上
【讨论】：
【参考方案18】：.print:last-child
page-break-after: avoid;
page-break-inside: avoid;
margin-bottom: 0px;
这对我有用。
【讨论】：
【参考方案19】：奇怪地设置透明边框为我解决了这个问题：
@media print
div
border: 1px solid rgba(0,0,0,0)
也许在容器元素上设置边框就足够了。
【讨论】：
【参考方案20】：我遇到了类似的问题，但原因是因为我在页面底部有 40 像素的边距，所以即使最后一页上有空间，最后一行也会自动换行。不是因为任何类型的page-break-* css 命令。我通过删除打印边距来修复它，它工作正常。只是想添加我的解决方案，以防其他人有类似的情况！
【讨论】：
【参考方案21】：将您需要的内容放在 div 中的页面上，并在该 div 上使用 page-break-inside:avoid。 如果需要，您的 div 将停留在一个页面上并进入第二或第三页，但下一个 div 如果必须进行分页，则应从下一页开始。
【讨论】：
【参考方案22】：检查底部的html标签后是否有空格。删除下面的任何空格对我有帮助
【讨论】：
【参考方案23】：首先，通过浏览器的开发工具模拟打印样式表。说明可以在here找到。
然后，您需要寻找额外的填充、边距、边框等，这些可能会使您的页面尺寸超出 8.5 英寸 x 11 英寸。请特别注意空格，因为这将无法通过打印预览对话框检测到。如果有不应该存在的空白，右键单击并检查光标下的元素应该会突出显示问题（除非它是导致它的边距）。
【讨论】：
【参考方案24】：在我的案例中，额外的页面问题是由页面上的table 元素引起的。我尝试了这里提供的许多解决方案，但为了解决问题，我不得不将表格 css 更改为：
table
width: 99%;
height: 99%;
【讨论】：
【参考方案25】：根据我是否使用，我还在下方/上方获得了额外的空间
page-break-after: 总是；或分页前：总是；
我所做的是 删除了我应用的元素的高度和边框 page-break-after 或 page-break-before。
这帮助我删除了那个多余的页面。
例如：
/*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 保存在我需要单独打印的每一行下方。
【讨论】：
【参考方案26】：我在这里的任何答案中都看不到我的解决方案，所以我猜这也是我的。
首先，如果您不知道这个技巧，它会有所帮助。您可以使用检查器预览打印页面。单击右上角的三个点，然后单击“更多工具 -> 渲染”，现在导航到“渲染”选项卡，您可以模拟 CSS 媒体类型“打印”。很有用！
我听取了@Michael Radionovs 的建议，为我的所有元素添加了边框。我给了 html、main、body 不同的边框颜色，我注意到最后我的 html 和 body 围绕着我不需要的额外页面。
给 html, body height: auto; 的技巧 或 html, body 高度: 99%; 对我不起作用，但设置
html, body height: max-content
为我的一些打印页面工作。
似乎导致问题的其他因素是 padding-bottom 或 margin-bottom 应用于我的容器元素。这将 html、body 和 main 标签推到了页面边界之外并创建了一个新页面。因此，也可以使用
重置这些属性值main, .master, .content margin: 0; padding: 0
为我的其余打印页面工作。
【讨论】：
【参考方案27】：@media print
.print-page
display: block;
height:900px;
【讨论】：
设置页面高度【参考方案28】：在我的例子中，我给了一个margin-top 一个导致打印空白页问题的div，我删除了那个margin，问题就消失了。
【讨论】：
【参考方案29】：我还得到了额外的空白页，唯一对我有用的就是将此规则添加到我的 css（用于打印）
*
box-sizing: border-box;
然后我不再需要担心在使用边距、填充或边框时添加额外的像素。
添加该规则后，我只需要调整框的位置，一切都完美无缺。
【讨论】：
以上是关于打印时如何避免最后出现多余的空白页？的主要内容，如果未能解决你的问题，请参考以下文章