I have created an invoice in the view page > custom template and when I export it to PDF, the content looks good, but it does not look good in the view page. Is there a way to make the content of the PDF and the view page separate? so that the invoice also looks good in the view page.
Viewpage export to pdf
-
- User
- Posts: 29
What I mean is whether it’s possible to have a custom template for the view page and a custom template for the PDF content. So, create separate custom templates for the view page and PDF. Is that possible?
<table class="ew-table no-border" style="width: 100%; font-family: Arial, sans-serif; margin: 0; padding: 0; font-size: 15px;">
<tr>
<td>
<div class="container5" style="margin: 0 auto; padding: 20px;">
<div class="header5" style="text-align: center; margin-bottom: 20px;">
<a href="https://www.klankschalenlimburg.nl/" target="_blank">
<img src="https://www.selexions.nl/uploadfiles/klankpdf3.jpg" alt="Klankschalen Limburg" style="display: block; margin: 0 auto; width: 1098px; height: 140.25px;" />
</a>
<div class="contact-info5" style="background: #fd7e14; padding: 10px; text-align: center; margin-bottom: 20px; font-size: 12px;">
</div>
</div>
<div class="details5" style="display: flex; justify-content: space-between; margin-bottom: 20px; font-size: 12px;">
<div class="left5" style="width: 48%; font-size: 12px;">
<p><br>{{: {{{dbvalue FactuurNaam}}} }}</p>
<p>{{: {{{dbvalue FactuurAdres}}} }}</p>
<p>{{: {{{dbvalue FactuurPostcode}}} }}</p>
<p>{{: {{{dbvalue FactuurPlaats}}} }}</p>
<p>{{: {{{dbvalue FactuurEmailadres}}} }}</p>
</div>
<div class="right5" style="width: 48%; text-align: right; font-size: 12px;">
<p>Geleen, {{{value FactuurDatum}}}<br><br><br></p>
</div>
</div>
<div class="invoice5" style="margin-bottom: 20px; font-size: 12px;">
<div class="invoice-header5" style="display: flex; justify-content: space-between; padding: 8px 0; word-break: break-word; font-weight: bold; font-size: 12px;">
<span><br><br>Beschrijving<br><u>____________</u></span>
</div>
<div class="invoice-item5" style="display: flex; justify-content: space-between; padding: 8px 0; word-break: break-word; font-size: 12px;">
<span style="white-space: pre-wrap; margin-top: -40px; font-size: 12px;"><br>{{{value FactuurOmschrijving}}}</span>
</div>
<div class="right-extended" style="align-items: center; font-size: 12px;">
<div style="text-align: left; white-space: nowrap; width: 108px; font-size: 12px;">
<p style="padding-bottom: 4px; font-size: 12px;"><br><br><br><br>Sub-totaal: {{: {{{dbvalue FactuurPrijs}}} }}</p>
</div>
<div style="text-align: left; white-space: nowrap; width: 108px; font-size: 12px;">
<p style="padding-bottom: 4px; font-size: 12px;">BTW: {{: {{{dbvalue FactuurBtwBedrag}}} }}</p>
</div>
<div style="text-align: left; white-space: nowrap; width: 108px; font-size: 15px;">
<p style="padding-bottom: 4px; font-size: 12px;">Totaal: {{: {{{dbvalue FactuurPrijsInclusiefBtw}}} }}</p>
</div>
</div>
<div class="totals5" style="text-align: right; margin-top: 125px; font-size: 12px;">
<div class="bank-info5" style="margin-bottom: 20px; float: left; text-align: left; margin-top: 125px; font-size: 12px;">
<p style="margin: 5px 0; font-size: 12px;"><br><br><br><br><br><br>Rabobank Geleen NL88RABO01160.10.568</p>
<p style="margin: 5px 0; font-size: 12px;">KvK Zuid-Limburg 14052069</p>
<p style="margin: 5px 0; font-size: 12px;">BTW-nummer 8140.10.532.B01</p>
</div>
</div>
<div class="payment-info" style="margin-top: 20px; font-weight: bold; font-size: 11px;">
<p><br><br><br><br><br><br><br><br><br><br>Gelieve te betalen voor {{: {{{dbvalue FactuurDatumBetalingstermijn}}} }}, ondervermelding van uw naam en factuurdatum.</p>
<p style="margin: 0; white-space: nowrap; font-weight: bold; font-size: 11px;">Barbarastraat 26, Geleen, Telefoonnummer: 046-4110136, E-mail: info@klankschalenlimburg.nl</p>
</div>
</div>
</div>
</td>
</tr>
</table>
-
- User
- Posts: 29
Thank you, this is what we were looking for. We used the code in the following way:
@if (IsExport("pdf")) {
<table class="ew-table no-border" style="width: 100%; font-family: Arial, sans-serif; margin: 0; padding: 0; font-size: 15px;">
<tr>
<td>
<div class="container5" style="margin: 0 auto; padding: 20px; position: relative; min-height: 100vh;">
<div class="header5" style="text-align: center; margin-bottom: 20px;">
<a href="https://www.klankschalenlimburg.nl/" target="blank">
<img src="https://www.selexions.nl/uploadfiles/klankpdf3.jpg" alt="Klankschalen Limburg" style="display: block; margin: 0 auto; width: 1098px; height: 140.25px;" />
</a>
<div class="contact-info5" style="background: #fd7e14; padding: 10px; text-align: center; margin-bottom: 20px; font-size: 12px;">
</div>
</div>
<div class="details5" style="display: flex; justify-content: space-between; margin-bottom: 20px; font-size: 12px;">
<div class="left5" style="width: 48%; font-size: 12px;">
<p><br>{{: {{{dbvalue FactuurNaam}}} }}</p>
<p>{{: {{{dbvalue FactuurAdres}}} }}</p>
<p>{{: {{{dbvalue FactuurPostcode}}} }}</p>
<p>{{: {{{dbvalue FactuurPlaats}}} }}</p>
<p>{{: {{{dbvalue FactuurEmailadres}}} }}</p>
</div>
<div class="right5" style="width: 48%; text-align: right; font-size: 12px;">
<p>Geleen, {{{value FactuurDatum}}}<br><br><br></p>
</div>
</div>
<div class="invoice5" style="margin-bottom: 20px; font-size: 12px;">
<div class="invoice-header5" style="display: flex; justify-content: space-between; padding: 8px 0; word-break: break-word; font-weight: bold; font-size: 12px;">
<span><br><br>Beschrijving<br><u>__________</u></span>
</div>
<div class="invoice-item5" style="display: flex; justify-content: space-between; padding: 8px 0; word-break: break-word; font-size: 12px;">
<span style="white-space: pre-wrap; margin-top: -40px; font-size: 12px;"><br>{{{value FactuurOmschrijving}}}</span>
</div>
<div class="right-extended" style="align-items: center; font-size: 12px;">
<div style="text-align: left; white-space: nowrap; width: 108px; font-size: 12px;">
<p style="padding-bottom: 4px; font-size: 12px;"><br><br><br><br>Sub-totaal: {{: {{{dbvalue FactuurPrijs}}} }}</p>
</div>
<div style="text-align: left; white-space: nowrap; width: 108px; font-size: 12px;">
<p style="padding-bottom: 4px; font-size: 12px;">BTW: {{: {{{dbvalue FactuurBtwBedrag}}} }}</p>
</div>
<div style="text-align: left; white-space: nowrap; width: 108px; font-size: 15px;">
<p style="padding-bottom: 4px; font-size: 12px;">Totaal: {{: {{{dbvalue FactuurPrijsInclusiefBtw}}} }}</p>
</div>
</div>
<div class="totals5" style="text-align: right; margin-top: 125px; font-size: 12px;">
<div class="bank-info5" style="margin-bottom: 20px; float: left; text-align: left; margin-top: 125px; font-size: 12px;">
<p style="margin: 5px 0; font-size: 12px;"><br><br><br><br><br><br>Rabobank Geleen NL88RABO01160.10.568</p>
<p style="margin: 5px 0; font-size: 12px;">KvK Zuid-Limburg 14052069</p>
<p style="margin: 5px 0; font-size: 12px;">BTW-nummer 8140.10.532.B01</p>
</div>
</div>
<div class="payment-info" style="position: absolute; bottom: 20px; width: 100%; font-weight: bold; font-size: 11px;">
<p><br><br><br><br><br><br>Gelieve te betalen voor {{: {{{dbvalue FactuurDatumBetalingstermijn}}} }}, ondervermelding van uw naam en factuurdatum.</p>
<p style="margin: 0; white-space: nowrap; font-weight: bold; font-size: 11px;">Barbarastraat 26, Geleen, Telefoonnummer: 046-4110136, E-mail: info@klankschalenlimburg.nl</p>
</div>
</div>
</div>
</td>
</tr>
</table>
} else {
<table class="ew-table no-border" style="width: 100%; font-family: verdana; background: #f4f4f4; margin: 0; padding: 0;">
<tr>
<td>
<div class="container5" style="margin: 0 auto; padding: 20px;">
<div class="header5" style="text-align: center; margin-bottom: 20px;">
<a href="https://www.klankschalenlimburg.nl/" target="blank">
<img src="https://www.selexions.nl/uploadfiles/klankpdf3.jpg" alt="Klankschalen Limburg" style="display: block; margin: 0 auto; width: 1098px; height: 140.25px;" />
</a>
<div class="contact-info5" style="background: #fd7e14; padding: 10px; text-align: center; margin-bottom: 20px;">
<p style="margin: 0; white-space: nowrap;">Barbarastraat 26, Geleen, Telefoonnummer: 046-4110136, E-mail: info@klankschalenlimburg.nl</p>
</div>
</div>
<div class="details5" style="display: flex; justify-content: space-between; margin-bottom: 20px;">
<div class="left5" style="width: 48%;">
<p><br>{{: {{{dbvalue FactuurNaam}}} }}</p>
<p>{{: {{{dbvalue FactuurAdres}}} }}</p>
<p>{{: {{{dbvalue FactuurPostcode}}} }}</p>
<p>{{: {{{dbvalue FactuurPlaats}}} }}</p>
</div>
<div class="right5" style="width: 48%; text-align: right;">
<p>Geleen, {{{value FactuurDatum}}}<br><br><br></p>
</div>
</div>
<div class="invoice5" style="margin-bottom: 20px;">
<div class="invoice-header5" style="display: flex; justify-content: space-between; padding: 8px 0; word-break: break-word; font-weight: bold; border-bottom: 1px solid #000;">
<span><br><br>Beschrijving<br><br></span>
</div>
<div class="invoice-item5" style="display: flex; justify-content: space-between; padding: 8px 0; word-break: break-word;">
<span style="white-space: pre-wrap; margin-top: -40px;">{{{value FactuurOmschrijving}}}</span>
</div>
</div>
<div class="totals5" style="text-align: right; margin-top: 125px;">
<div class="bank-info5" style="margin-bottom: 20px; float: left; text-align: left; margin-top: 125px;">
<p style="margin: 5px 0;"><br><br><br><br><br><br>Rabobank Geleen NL88RABO01160.10.568</p>
<p style="margin: 5px 0;">KvK Zuid-Limburg 14052069</p>
<p style="margin: 5px 0;">BTW-nummer 8140.10.532.B01<br><br><br><br><br><br></p>
</div>
<div class="right-extended" style="display: flex; justify-content: flex-end; align-items: center;">
<div style="text-align: right; white-space: nowrap; width: 108px;">
<p style="border-bottom: 1px solid #000; padding-bottom: 4px;">Sub-totaal</p>
<p>{{: {{{dbvalue FactuurPrijs}}} }}</p>
</div>
<div style="text-align: right; white-space: nowrap; width: 108px;">
<p style="border-bottom: 1px solid #000; padding-bottom: 4px;">BTW 21%</p>
<p>{{: {{{dbvalue FactuurBtwBedrag}}} }}</p>
</div>
<div style="text-align: right; white-space: nowrap; width: 108px;">
<p style="border-bottom: 1px solid #000; padding-bottom: 4px;">Totaal</p>
<p>{{: {{{dbvalue FactuurPrijsInclusiefBtw}}} }}</p>
</div>
</div>
</div>
<div class="payment-info" style="margin-top: 20px; font-weight: bold;">
<p><br><br><br><br><br><br><br><br><br><br><br><br><br>Gelieve te betalen voor {{: {{{dbvalue FactuurDatumBetalingstermijn}}} }}, ondervermelding van uw naam en factuurdatum.</p>
</div>
</div>
</td>
</tr>
</table>
}