invoice print template is unusable

Post Reply
grburgos
Posts: 179
Joined: 30 Sep 2010, 00:45

16 Mar 2022, 23:11

Hello everyone, I noticed that in the demo for Pandora the invoice.xhtml it looks lovely when viewing as a web page. However, when you click the print button (p:printer) the generated printal item is unusable. Are there any settings that need to be sent to p:print for it to generate the invoice cleanly?
Netbeans 12, Apache Tomcat 9, JDK 11, PrimeFaces 11

mert.sincan
Posts: 5074
Joined: 29 Jun 2013, 12:38

19 Apr 2022, 03:20

Thanks a lot for the feedback! We'll check and get back to you.

mert.sincan
Posts: 5074
Joined: 29 Jun 2013, 12:38

19 Apr 2022, 10:46

Hi,

Please try the following changes;
invoice.xhtml

Code: Select all

<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/template.xhtml">

    <ui:define name="title">Invoice</ui:define>

    <ui:define name="viewname">
        <li>Pages</li>
        <li><i class="pi pi-angle-right"/></li>
        <li>
            <p:link outcome="/dashboard">Invoice</p:link>
        </li>
    </ui:define>

    <ui:define name="content">
        <p:commandButton value="Print" type="button" icon="pi pi-print" style="margin-bottom: 2rem" onclick="window.print()"></p:commandButton>

        <div class="p-grid">
            <div class="p-col">
                <div class="card">
                    <p:outputPanel id="invoice-content">
                        <div class="invoice">
                            <div class="invoice-header">
                                <div class="invoice-company">
                                    <p:graphicImage id="invoice-logo" name="images/logo-footer.svg"
                                                    library="pandora-layout" styleClass="logo-image"/>
                                    <div class="company-name">YOUR COMPANY</div>
                                    <div>9137 3rd Lane California City</div>
                                    <div>CA 93504, U.S.A.</div>
                                </div>
                                <div>
                                    <div class="invoice-title">INVOICE</div>
                                    <div class="invoice-details">
                                        <div class="invoice-label">DATE</div>
                                        <div class="invoice-value">#{invoiceDemoView.today}</div>

                                        <div class="invoice-label">INVOICE #</div>
                                        <div class="invoice-value">8523</div>

                                        <div class="invoice-label">CUSTOMER ID</div>
                                        <div class="invoice-value">C1613</div>
                                    </div>
                                </div>
                            </div>
                            <div class="invoice-to">
                                <div class="bill-to">BILL TO</div>
                                <div class="invoice-to-info">
                                    <div>Claire Williams, 148 Hope Lane</div>
                                    <div>Palo Alto, CA 94304.</div>
                                </div>
                            </div>
                            <div class="invoice-items">
                                <table>
                                    <thead>
                                    <tr>
                                        <th>Description</th>
                                        <th>Quantity</th>
                                        <th>Unit Price</th>
                                        <th>Line Total</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>Green T-Shirt</td>
                                        <td>1</td>
                                        <td>$49.00</td>
                                        <td>$49.00</td>
                                    </tr>
                                    <tr>
                                        <td>Game Controller</td>
                                        <td>2</td>
                                        <td>$99.00</td>
                                        <td>$198.00</td>
                                    </tr>
                                    <tr>
                                        <td>Mini Speakers</td>
                                        <td>1</td>
                                        <td>$85.00</td>
                                        <td>$85.00</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="invoice-summary">
                                <div class="invoice-notes">
                                    <b>NOTES</b>
                                    <div>

                                    </div>
                                </div>
                                <div>
                                    <div class="invoice-details">
                                        <div class="invoice-label">SUBTOTAL</div>
                                        <div class="invoice-value">$332.00</div>

                                        <div class="invoice-label">VAT</div>
                                        <div class="invoice-value">0</div>

                                        <div class="invoice-label">TOTAL</div>
                                        <div class="invoice-value">$332.00</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </p:outputPanel>

                </div>
            </div>
        </div>

    </ui:define>
</ui:composition>

Please use window.print() instead of p:printer component.

Please add the following print style;

Code: Select all

<style>
@media print {
    body * {
        visibility: hidden;
    }
    #invoice-content * {
        visibility: visible;
    }
    #invoice-content {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        padding: 0;
        margin: 0;
    }
}
</style>
You can update it accoring to your needs.

Best Regards,

Post Reply

Return to “Pandora - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest