Hello, I tried to use PeachPDF but this html doesn't render in the PDF. It only shows a few characters of text.
It looks fine in browser. I do like the idea of a dependency-free PDF generator!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invoice INV-1EC34E91</title>
<style>
body { background-color: #f9fafb; margin: 0; padding: 20px; }
.container { max-width: 800px; margin: 0 auto; background: white; padding: 32px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; }
.invoice-title { font-size: 24px; font-weight: bold; color: #1f2937; margin: 0; }
.invoice-id { color: #6b7280; margin: 4px 0 0 0; }
.date-info { text-align: right; color: #6b7280; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.company-info h2, .bill-to h2 { font-weight: 600; color: #374151; margin-bottom: 8px; }
.company-info p, .bill-to p { color: #6b7280; margin: 0; }
.divider { border-top: 1px solid #e5e7eb; margin: 24px 0; }
.line-items h3 { font-weight: 600; color: #374151; margin-bottom: 16px; }
table { width: 100%; font-size: 14px; text-align: left; color: #374151; border-collapse: collapse; }
thead { font-size: 12px; color: #374151; text-transform: uppercase; background-color: #f9fafb; }
th, td { padding: 12px 16px; border-bottom: 1px solid #e5e7eb; }
th { font-weight: 600; }
.total-section { display: flex; justify-content: flex-end; margin-bottom: 32px; }
.total-box { width: 256px; }
.total-row { display: flex; justify-content: space-between; padding: 8px 0; }
.total-row span { font-weight: 600; }
.amount-due { border-top: 1px solid #d1d5db; padding-top: 8px; margin-top: 8px; }
.amount-due-row { display: flex; justify-content: space-between; font-size: 18px; font-weight: bold; }
.footer { border-top: 1px solid #e5e7eb; padding-top: 24px; margin-top: 32px; text-align: center; color: #6b7280; font-size: 14px; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<div>
<h1 class="invoice-title">INVOICE</h1>
<p class="invoice-id">INV-1EC34E91</p>
</div>
<div class="date-info">
<p>Date: October 07, 2025</p>
<p>Due: November 06, 2025</p>
</div>
</div>
<div class="grid">
<div class="company-info">
<h2>sdf gsd gsdf g</h2>
<p>sd fg sdfg dsfg </p>
<p>sdfg sdfg sdfg </p>
</div>
<div class="bill-to">
<h2>Bill To</h2>
<p>test@test.com</p>
</div>
</div>
<div class="divider"></div>
<div class="line-items">
<h3></h3>
<table>
<thead>
<tr>
<th>Description</th>
<th style="text-align: right">Amount</th>
</tr>
</thead>
<tbody>
<tr class=\"border-b border-gray-200\">
<td class=\"px-4 py-3\">thr3</td>
<td class=\"px-4 py-3 text-right\">$3.01</td>
</tr>
<tr class=\"border-b border-gray-200\">
<td class=\"px-4 py-3\">two21</td>
<td class=\"px-4 py-3 text-right\">$2.00</td>
</tr>
</tbody>
</table>
</div>
<div class="total-section">
<div class="total-box">
<div class="total-row">
<span>Total</span>
<span>$0.00</span>
</div>
<div class="amount-due">
<div class="amount-due-row">
<span>AMOUNT DUE</span>
<span>$0.00</span>
</div>
</div>
</div>
</div>
<div class="footer">
<p>Invoicing powered by sdfgsdfgds fgsdf g</p>
</div>
</div>
</body>
</html>
Hello, I tried to use PeachPDF but this html doesn't render in the PDF. It only shows a few characters of text.
It looks fine in browser. I do like the idea of a dependency-free PDF generator!