n8n-nodes-json-html-to-pdf
Version:
Professional n8n node to convert JSON data or HTML content to PDF documents with Handlebars template support
277 lines (245 loc) • 7.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invoice {{invoiceNumber}}</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
color: #333;
line-height: 1.6;
padding: 40px;
}
.invoice-header {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 2px solid #2c3e50;
}
.company-info h1 {
color: #2c3e50;
font-size: 32px;
margin-bottom: 10px;
}
.company-info p {
color: #7f8c8d;
font-size: 14px;
}
.invoice-details {
text-align: right;
}
.invoice-details h2 {
color: #2c3e50;
font-size: 24px;
margin-bottom: 10px;
}
.invoice-details p {
font-size: 14px;
margin: 5px 0;
}
.invoice-details .invoice-number {
font-weight: bold;
color: #e74c3c;
font-size: 16px;
}
.billing-info {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.billing-section {
width: 48%;
}
.billing-section h3 {
color: #2c3e50;
font-size: 16px;
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px solid #ecf0f1;
}
.billing-section p {
font-size: 14px;
margin: 5px 0;
}
.items-table {
width: 100%;
margin-bottom: 30px;
}
.items-table table {
width: 100%;
border-collapse: collapse;
}
.items-table th {
background-color: #2c3e50;
color: white;
padding: 12px;
text-align: left;
font-size: 14px;
font-weight: 500;
}
.items-table th:last-child,
.items-table td:last-child {
text-align: right;
}
.items-table td {
padding: 12px;
border-bottom: 1px solid #ecf0f1;
font-size: 14px;
}
.items-table tr:hover {
background-color: #f8f9fa;
}
.total-section {
display: flex;
justify-content: flex-end;
margin-top: 30px;
}
.total-box {
width: 300px;
}
.total-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: 14px;
}
.total-row.subtotal {
border-bottom: 1px solid #ecf0f1;
}
.total-row.grand-total {
margin-top: 10px;
padding-top: 10px;
border-top: 2px solid #2c3e50;
font-size: 18px;
font-weight: bold;
color: #2c3e50;
}
.payment-terms {
margin-top: 40px;
padding: 20px;
background-color: #f8f9fa;
border-left: 4px solid #3498db;
}
.payment-terms h3 {
color: #2c3e50;
font-size: 16px;
margin-bottom: 10px;
}
.payment-terms p {
font-size: 14px;
color: #7f8c8d;
}
.footer {
margin-top: 60px;
padding-top: 20px;
border-top: 1px solid #ecf0f1;
text-align: center;
font-size: 12px;
color: #95a5a6;
}
</style>
</head>
<body>
<div class="invoice-header">
<div class="company-info">
<h1>{{company.name}}</h1>
<p>{{company.address}}</p>
<p>{{company.city}}, {{company.country}}</p>
<p>Phone: {{company.phone}}</p>
<p>Email: {{company.email}}</p>
</div>
<div class="invoice-details">
<h2>INVOICE</h2>
<p class="invoice-number">{{invoiceNumber}}</p>
<p><strong>Date:</strong> {{date}}</p>
<p><strong>Due Date:</strong> {{dueDate}}</p>
</div>
</div>
<div class="billing-info">
<div class="billing-section">
<h3>Bill To:</h3>
<p><strong>{{customer.name}}</strong></p>
<p>{{customer.company}}</p>
<p>{{customer.address}}</p>
<p>{{customer.city}}, {{customer.country}}</p>
<p>{{customer.email}}</p>
</div>
<div class="billing-section">
<h3>Ship To:</h3>
{{#if shipping}}
<p><strong>{{shipping.name}}</strong></p>
<p>{{shipping.address}}</p>
<p>{{shipping.city}}, {{shipping.country}}</p>
{{else}}
<p>Same as billing address</p>
{{/if}}
</div>
</div>
<div class="items-table">
<table>
<thead>
<tr>
<th style="width: 10%">Item</th>
<th style="width: 40%">Description</th>
<th style="width: 15%">Quantity</th>
<th style="width: 15%">Unit Price</th>
<th style="width: 20%">Amount</th>
</tr>
</thead>
<tbody>
{{#each items}}
<tr>
<td>{{@index}}</td>
<td>{{description}}</td>
<td>{{quantity}}</td>
<td>${{unitPrice}}</td>
<td>${{amount}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<div class="total-section">
<div class="total-box">
<div class="total-row subtotal">
<span>Subtotal:</span>
<span>${{subtotal}}</span>
</div>
{{#if tax}}
<div class="total-row">
<span>Tax ({{taxRate}}%):</span>
<span>${{tax}}</span>
</div>
{{/if}}
{{#if discount}}
<div class="total-row">
<span>Discount:</span>
<span>-${{discount}}</span>
</div>
{{/if}}
<div class="total-row grand-total">
<span>Total:</span>
<span>${{total}}</span>
</div>
</div>
</div>
<div class="payment-terms">
<h3>Payment Terms</h3>
<p>{{paymentTerms}}</p>
{{#if notes}}
<p style="margin-top: 10px;"><strong>Notes:</strong> {{notes}}</p>
{{/if}}
</div>
<div class="footer">
<p>Thank you for your business!</p>
<p>This invoice was generated electronically and is valid without signature.</p>
</div>
</body>
</html>