invoice print template is unusable
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
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 14, Apache Tomcat 9, JDK 11, PrimeFaces 11
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Thanks a lot for the feedback! We'll check and get back to you.
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi,
Please try the following changes;
invoice.xhtml
Please use window.print() instead of p:printer component.
Please add the following print style;
You can update it accoring to your needs.
Best Regards,
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 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>
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest