123 lines
3.3 KiB
HTML
123 lines
3.3 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
@page {
|
|
size: a4 portrait;
|
|
margin: 1cm 1cm 1cm 2cm;
|
|
font-size: 12pt;
|
|
font-family: "Barlow Semi Condensed";
|
|
@frame address_frame {
|
|
/* Static Frame */
|
|
-pdf-frame-content: address_frame_content;
|
|
left: 2.5cm;
|
|
width: 8.5cm;
|
|
top: 5.5cm;
|
|
height: 4cm;
|
|
-pdf-frame-border: 1;
|
|
}
|
|
|
|
@frame letter_head_frame {
|
|
/* Another static Frame */
|
|
-pdf-frame-content: letter_head_content;
|
|
left: 15.5cm;
|
|
width: 4cm;
|
|
top: 1cm;
|
|
}
|
|
|
|
@frame content_first_page_frame {
|
|
/* Content Frame */
|
|
left: 2cm;
|
|
width: 13cm;
|
|
top: 11cm;
|
|
bottom: 1cm;
|
|
-pdf-frame-border: 1;
|
|
}
|
|
}
|
|
|
|
|
|
#address_frame_content {
|
|
background-color: lightcoral;
|
|
}
|
|
|
|
#letter_head_content {
|
|
background-color: lightblue;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Content for Static Frame 'header_frame' -->
|
|
<div id="address_frame_content">
|
|
<p>Absender</p>
|
|
<address>Anschrift
|
|
in
|
|
mehreren
|
|
Zeilen
|
|
</address>
|
|
</div>
|
|
<div id="letter_head_content">
|
|
{% for address in envelope.AddressContent.Contents %}
|
|
{% if address.Head %}
|
|
<p><strong>{{ address.Head }}</strong></p>
|
|
{% endif %}
|
|
<p>{{ address.Text | replace('\n', '<br>') }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
|
|
<!-- HTML Content -->
|
|
<table>
|
|
<tr>
|
|
<td>Rechnungsnummer:</td>
|
|
<td>Kundennummer:</td>
|
|
<td>Rechnungsdatum:</td>
|
|
</tr>
|
|
<tr>
|
|
<td>{{ invoice.Id }}</td>
|
|
<td>{{ invoice.CustomerId }}</td>
|
|
<td>{{ invoice.InvoiceDate }}</td>
|
|
</tr>
|
|
</tr>
|
|
</table>
|
|
|
|
|
|
To PDF or not to PDF
|
|
|
|
<section>
|
|
<h2>About Us</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
|
|
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
|
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
|
laborum.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Our Services</h2>
|
|
<ul>
|
|
<li>Service 1</li>
|
|
<li>Service 2</li>
|
|
<li>Service 3</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>About Us</h2>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
|
|
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
|
|
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
|
laborum.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Our Services</h2>
|
|
<ul>
|
|
<li>Service 1</li>
|
|
<li>Service 2</li>
|
|
<li>Service 3</li>
|
|
</ul>
|
|
</section>
|
|
</body>
|
|
</html> |