打印特定div时无法删除添加的多余空白页

Question

我正在尝试使用PrimeFaces打印组件在对话框内打印div，如下所示：

1- Page.xhtml

 <ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui" template="/WEB-INF/templateTest.xhtml">


<ui:define name="title">Test Page</ui:define>

<ui:define name="viewname">Test Page</ui:define>



<ui:define name="content">
        <h:form id="form">

            <div>
                <div>
                    <div>

<p:commandButton value="Print" type="button" onclick="PF('printDialog').show();" />
<p:dialog resizable="true" dir="rtl" closeOnEscape="true" modal="true"  id="printDialog"  
               header="print" widgetVar="printDialog" width="1400" height="500" 
               position="center top" style="height: 600px;max-height: 600px;overflow: hidden;margin-top:100px;">


    <p:commandButton value="print"  type="button"  icon="ui-icon-print" style="display:block;margin-bottom: 20px;width:150px;">
              <p:printer target="printDiv" />
    </p:commandButton>             
    <h:panelGroup layout="block" id="printDiv"   style="direction:rtl;width:95%;margin-top:50px;">
       <h:panelGroup id="letterTitle">
            <p dir="rtl"><strong><span style="font-size:18px"><span style="font-family:times new roman,times,serif"> detail <span id="peaseUponHim" style="margin-right:100px;"> detail </span> </span></span></strong></p>

            <p dir="rtl"><strong><span style="font-size:18px"><span style="font-family:times new roman,times,serif"> detail </span></span></strong></p>

            <p dir="rtl"><span style="font-size:18px"><span style="font-family:times new roman,times,serif">detail2 </span></span></p>

            <p dir="rtl"><span style="font-size:18px"><span style="font-family:times new roman,times,serif">detail</span></span></p>

            <p dir="rtl" style="text-align:center"><span style="font-size:18px"><span style="font-family:times new roman,times,serif"><span style="font-family:times new roman,times,serif">greeting</span></span></span></p>

            <p dir="RTL" style="margin-left:0in; margin-right:0in; text-align:left"><strong><span style="font-size:18px"><span style="font-family:Calibri,sans-serif"><span style="font-family:&quot;PT Bold Heading&quot;">detail </span></span></span></strong></p>

            <p dir="RTL" style="margin-left:0in; margin-right:0in; text-align:left"><strong><span style="font-size:18px"><span style="font-family:Calibri,sans-serif"><span style="font-family:&quot;PT Bold Heading&quot;">detail</span></span></span></strong></p>


       </h:panelGroup>




       <p:panelGrid style="width:800px;margin:0 auto">

          <f:facet name="header">
            <p:row>
                <p:column style="font-weight: bold;" colspan="4">title</p:column>
            </p:row>
         </f:facet>

          <p:row>
            <p:column style="font-weight: bold;">col1</p:column>
            <p:column  colspan="3" style="font-weight: bold;"></p:column>
          </p:row>

          <p:row>
            <p:column style="font-weight: bold;width:100px;">col2</p:column>
            <p:column style="font-weight: bold;"></p:column>

            <p:column style="font-weight: bold;width:100px;">col3</p:column>
            <p:column  style="font-weight: bold;"></p:column>                               
          </p:row>

          <p:row>
            <p:column style="font-weight: bold;">col4</p:column>
            <p:column  style="font-weight: bold;"></p:column>

            <p:column style="font-weight: bold;">col5</p:column>
            <p:column  style="font-weight: bold;"></p:column>                                                                   
          </p:row>

          <p:row>
            <p:column  style="font-weight: bold;">col6</p:column>
            <p:column   style="font-weight: bold;"></p:column>

            <p:column style="font-weight: bold;">col7</p:column>
            <p:column style="font-weight: bold;"></p:column>


          </p:row>

          <p:row>
            <p:column style="font-weight: bold;">col8</p:column>
            <p:column   style="font-weight: bold;"></p:column>

            <p:column style="font-weight: bold;">col9</p:column>
            <p:column style="font-weight: bold;"></p:column>


          </p:row>

          <p:row>                                  

            <p:column style="font-weight: bold;">col10</p:column>
            <p:column style="font-weight: bold;"></p:column>

             <p:column style="font-weight: bold;">col11</p:column>
            <p:column   style="font-weight: bold;"></p:column>


          </p:row>

       </p:panelGrid>

       <p:panelGrid style="width:800px;margin:0 auto;margin-top:50px;">
          <f:facet name="header">
            <p:row>
                <p:column style="font-weight: bold;" colspan="7">table2</p:column>
            </p:row>
         </f:facet>

          <p:row>

            <p:column rowspan="2" style="font-weight: bold;">col1</p:column>
            <p:column colspan="2" style="font-weight: bold;text-align:center">col2</p:column>


            <p:column rowspan="2" style="font-weight: bold;">col3</p:column>
            <p:column rowspan="2" style="font-weight: bold;">col4</p:column>

            <p:column rowspan="2" style="font-weight: bold;">col5</p:column>
            <p:column rowspan="2" style="font-weight: bold;">col6</p:column>


          </p:row>

          <p:row>
            <p:column style="font-weight: bold;text-align:center">col1 group1</p:column>
            <p:column  style="font-weight: bold;text-align:center">col1 group2</p:column>
          </p:row>




          <p:repeat value="#{myBean.myList}" varStatus="loopVar" var="materialPrint">   
              <p:row>                                   
                    <p:column style="font-weight: bold;">#{loopVar.index+1}</p:column>
                    <p:column  style="font-weight: bold;">#{materialPrint.arabicName}</p:column>
                    <p:column style="font-weight: bold;">#{materialPrint.englishName}</p:column>
                    <p:column  style="font-weight: bold;">#{materialPrint.commercialName}</p:column>
                    <p:column style="font-weight: bold;">#{materialPrint.code}</p:column>
                    <p:column  style="font-weight: bold;">#{materialPrint.code2}</p:column>
                    <p:column style="font-weight: bold;">
                        <h:outputText value="#{materialPrint.quantity}">
                                <f:convertNumber pattern="#0.#" />
                        </h:outputText>
                       (#{materialPrint.quantityWords})
                   </p:column>                                      
              </p:row>
          </p:repeat>




       </p:panelGrid>

       <p:panelGrid style="width:800px;margin:0 auto;margin-top:50px;">
          <f:facet name="header">
            <p:row>
                <p:column style="font-weight: bold;" colspan="2">table3</p:column>
            </p:row>
         </f:facet>

          <p:row>                                   
            <p:column  style="font-weight: bold;width:250px;">col1</p:column>
            <p:column  style="font-weight: bold;"></p:column>                                                       
          </p:row>

          <p:row>                                   
            <p:column  style="font-weight: bold;">col2</p:column>
            <p:column  style="font-weight: bold;"></p:column>
          </p:row>

          <p:row>                        
            <p:column  style="font-weight: bold;">col3</p:column>
            <p:column  style="font-weight: bold;"></p:column>                                                       
          </p:row>

         <p:row>                                    
            <p:column  style="font-weight: bold;">col4</p:column>
            <p:column  style="font-weight: bold;"></p:column>                                                           
          </p:row>

       </p:panelGrid>

       <p dir="rtl"><span style="font-size:16px"><span style="font-family:times new roman,times,serif">notes here </span></span></p>
    </h:panelGroup>                         
</p:dialog>                         

</div>
</div>
</div>
</h:form>   
</ui:define>

</ui:composition>

2- templateTest.xhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
            <meta name="apple-mobile-web-app-capable" content="yes" />
        </f:facet>
        <title><ui:insert name="title">PrimeFaces California</ui:insert></title>
        <h:outputScript name="js/nanoscroller-rtl.js" library="california-layout" />
        <h:outputScript name="js/layout.js" library="california-layout" />
        <h:outputStylesheet name="css/layout-blue.css" library="california-layout" />
        <ui:insert name="head"/>
    </h:head>

    <h:body styleClass="main-body">

        <div class="layout-wrapper #{guestPreferences.menuLayout == 'overlay' ? 'layout-wrapper-overlay-sidebar': null}">

            <div class="layout-main">
                <div class="route-bar">
                    <div class="route-bar-breadcrumb">
                        <i class="fa fa-home"></i> <span>/ </span>
                        <ui:insert name="viewname" />
                    </div>

                </div>

                <div class="layout-main-content">
                    <ui:insert name="content"/>
                </div>


            </div>
        </div>

    </h:body>

</html>

我正在使用 primefaces加利福尼亚主题，它的CSS在这里：

https://www.primefaces.org/california/javax.faces.resource/css/layout-blue.css.xhtml?ln=california-layout

我的问题是，打印时会出现多余的空白页。我没有运气就尝试了以下链接中的所有解决方案：how to avoid extra blank page at end while printing?

更新：我注意到当我删除模板css文件时： layout-blue.css 这个问题不见了，所以那里有一种冲突的风格，但是我不知道它可能是哪一个？

Answer 1

首先，我将要求您在@Page中设置一些默认规则，如下：

@media print { 
  @page  {
    size: A4 portrait landscape;
    margin: 12mm 10mm 20mm 10mm;
  }
  html, body {
    height: 99%;
  }
  body { 
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    overflow: visible;
  }
 }

这是一个示例，您可以在@Page和@Media中查看更多详细信息。另外，如您所见，将html, body设置为height: 99%可以防止页面产生额外的1％垂直空间，该空间可能会在此过程中产生空白页面。

无论如何，借助 CSS ，您还可以防止空白页面应用于您的元素：

.big-element {
page-break-inside: avoid;
}

您还可以了解有关page-break-inside的更多信息。

希望我能对您有所帮助。