Невозможно удалить лишнюю пустую страницу, добавленную при печати определенного раздела - PullRequest
Новая
       1

Невозможно удалить лишнюю пустую страницу, добавленную при печати определенного раздела

0 голосов
/ 26 декабря 2018

Я пытаюсь напечатать div внутри диалога, используя компонент печати PrimeFaces следующим образом:

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 California theme , и его css здесь:

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

Моя проблемачто я получаю дополнительную пустую страницу при печати.Я попробовал все решения по следующей ссылке безуспешно: как избежать лишних пустых страниц в конце при печати?

ОБНОВЛЕНИЕ: я заметил, что когда я удалилфайл шаблона CSS: layout-blue.css проблема устранена, поэтому существует противоречивый стиль, но я не могу знать, какой это может быть?

1 Ответ

0 голосов
/ 04 января 2019

Прежде всего, я попрошу вас установить некоторые правила по умолчанию в @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 вы также можете предотвратить применение blank-page в вашем элементе: 

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

Вы также можете прочитать подробнее о разрыв страницы для получения более подробной информации.

Я надеюсь, что у меня есть помощь в вашемпуть.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...