Viewpage export to pdf

aiden · Post by **aiden** » Wed Jun 26, 2024 7:27 pm

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.

MichaelG · Post by **MichaelG** » Thu Jun 27, 2024 10:20 am

Show your custom template. Explain how "it does not look good in the view page".

aiden · Post by **aiden** » Tue Jul 02, 2024 7:06 pm

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>

MichaelG · Post by **MichaelG** » Wed Jul 03, 2024 8:32 am

You can probably try:

@if (IsExport("pdf") {
... export pdf template
} else {
... normal template
}

aiden · Post by **aiden** » Wed Jul 03, 2024 5:03 pm

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>
}