Question

我正在使用CSS属性

如果我使用page-break-after: always; =＆gt;它会在

之前打印一个额外的空白页面

如果我使用page-break-before: always; =＆gt;之后会打印一个额外的空白页。 如何避免这种情况？

<!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>

Answer 1

你试过这个吗？

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

Answer 2

你可以添加

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

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

请注意，IE8中不支持：last-child选择器，如果你的目标是浏览器那么糟糕。

Answer 3

描述的解决方案here帮助了我（webarchive link）。

首先，您可以为所有元素添加边框，以查看导致新页面被追加的原因（可能是一些边距，填充等）。

div { border: 1px solid black;}

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

html, body { height: auto; }

Answer 4

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

@media print {

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

}

确保它是100vh

Answer 5

这对我有用

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

Answer 6

为所有其他不用于打印的元素设置display:none。设置visibility:hidden会让它们隐藏起来，但它们仍然存在，并为它们占用了空间。空页面用于隐藏元素。

Answer 7

不知道（至于现在）为什么，但这个有帮助：

  Type type = new TypeToken<Map<String, String>>(){}.getType();
  Map<String, String> myMap = new Gson().fromJson(jsonObject.toString(), type);

希望有人在解决问题的同时挽救他的头发......;）

Answer 8

在我的案例中，设置所有div的宽度有助于：

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

Answer 9

我更改了打印区域的css display和width属性

＆＃13;

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

＆＃13;

Answer 10

如果您只想使用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以获取使用此功能的示例。您可以使用另一个标记（如P或DIV）替换脚本中的H2。

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

Answer 11

在使用各种分页设置和高度以及身体标签上的各种CSS规则进行挣扎之后，我终于在一年后解决了这个问题。

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

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

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

Answer 12

似乎有很多可能的原因，可能的主题是身体标签最终的高度被认为太大而不是原因。

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

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

注意，根据PhpStorm，auto似乎不是正确的值。但是，根据Mozilla的documentation on min-height：

，这是正确的

自动
弹性项目的默认最小大小，为其他布局提供比0更合理的默认值。

Answer 13

我刚遇到一个从

改变的情况

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

到

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

解决了这个问题。

Answer 14

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

这对我有用。

Answer 15

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

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

body.printing {
    display: block;
}

你给身体类=＆＃34;打印＆＃34;在doc准备好，并启用打印样式。该系统允许模块化打印样式和浏览器内打印预览。

Answer 16

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

# I used this command to create the key with a password
$ ssh-keygen -b 2048 -t rsa -C "awsfrankfurt" -f ~/.ssh/awsfrankfurt

# Then when I try to import it into AWS EC2, the error appears:
$ aws --region eu-central-1 ec2 import-key-pair \
    --key-name "awsfrankfurt" \
    --public-key-material ~/.ssh/awsfrankfurt

An error occurred (InvalidKey.Format) when the ImportKeyPair operation: 
Key is not in valid OpenSSH public key format

Answer 17

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

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

Answer 18

没有一个答案对我有用，但是在阅读了所有答案之后，我弄清楚了我的问题是什么我有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" );

仅在该特定页面中

Answer 19

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

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

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

Answer 20

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

Answer 21

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

Answer 22

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

Answer 23

首先，通过浏览器的devtool模拟打印样式表。可以在here中找到说明。

然后，您将需要寻找额外的填充，边距，边框等，它们可能会将页面的尺寸扩展到8.5英寸x 11英寸以上。请特别注意空白，因为这将无法通过打印预览对话框检测到。如果有空白不应该出现，请右键单击并检查光标下方的元素，以突出显示该问题（除非是由空白引起的）。

Answer 24

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

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

Answer 25

我还在下方/上方获得了额外的空间，具体取决于我是否使用

分页后：总是；或分页前：总是;

我所做的是移除我应用的元素的高度和边框 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。

Answer 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 }

为我其余的打印页面工作。

Answer 27

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

如何在打印时避免额外的空白页？

27 个答案: