代码之家  ›  专栏  ›  技术社区  ›  Mahmoud Saleh

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

  •  3
  • Mahmoud Saleh  · 技术社区  · 6 年前

    1-第.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-模板测试.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加州主题

    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文件时: 布局-蓝色.css 问题不存在了,所以有一个矛盾的风格,但我不知道它可能是哪一个?

    1 回复  |  直到 6 年前
        1
  •  -1
  •   Wesley Magalhães    6 年前

    首先,我将要求您在 @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 更多细节。

    我希望在你的道路上我能有所帮助。