Purchase order HTML template
A printable A4 purchase order template in HTML with PO number, vendor and ship-to boxes, SKU table, VAT and an approval line. Generate POs as PDF automatically.
Paper: A4 · preview scaled to fit
Render it with the API
curl https://html-pdf.com/v1/pdf \
-H "Authorization: Bearer $HTML_PDF_KEY" \
-F "index.html=@purchase-order.html" \
-F 'options={"prefer_css_page_size": true}' \
-o purchase-order.pdfOr ask your AI agent: "Make me a purchase order PDF using the html-pdf.com purchase order template." · Guides · API reference
Tips
- The table header repeats on every page (
thead { display: table-header-group }), so long orders stay readable. - SKUs use a monospace font so codes are easy to check against delivery notes.
- Trigger it from Airtable, Google Sheets or n8n when stock runs low: see Airtable to PDF.
HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Purchase order PO-2026-0381</title>
<style>
@page { size: A4; margin: 16mm; }
* { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; font-size: 11.5px; line-height: 1.5; margin: 0; }
.top { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 16px; border-bottom: 2px solid #111; margin-bottom: 20px; }
.brand { font-size: 18px; font-weight: 700; }
h1 { font-size: 22px; margin: 0; letter-spacing: .02em; text-transform: uppercase; }
.muted { color: #666; }
.meta { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #111; margin-bottom: 20px; }
.meta > div { padding: 8px 10px; border-right: 1px solid #111; }
.meta > div:last-child { border-right: 0; }
.label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: #777; margin-bottom: 2px; }
.parties { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.box { border: 1px solid #ccc; padding: 10px 12px; }
table { width: 100%; border-collapse: collapse; }
thead { display: table-header-group; }
th { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; text-align: left; padding: 7px 8px; background: #111; color: #fff; }
td { padding: 8px; border-bottom: 1px solid #e3e3e3; vertical-align: top; }
tbody tr:nth-child(even) td { background: #f7f7f7; }
.r { text-align: right; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; }
tr { break-inside: avoid; }
.bottom { display: grid; grid-template-columns: 1fr 240px; gap: 24px; margin-top: 16px; break-inside: avoid; }
.totals td { border: 0; padding: 3px 0; background: none !important; }
.totals .grand td { border-top: 2px solid #111; padding-top: 8px; font-size: 14px; font-weight: 700; }
.sign { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; break-inside: avoid; }
.sign div { border-top: 1px solid #111; padding-top: 6px; font-size: 10px; color: #666; height: 44px; }
@media screen {
html { background: #e9e9e7; }
body { width: 210mm; min-height: 297mm; margin: 24px auto; padding: 16mm; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06); box-sizing: border-box; }
}
</style>
</head>
<body>
<div class="top">
<div><div class="brand">Your Company</div><div class="muted">Carrer de Example 1, 08001 Barcelona, Spain · VAT ES B12345678</div></div>
<h1>Purchase order</h1>
</div>
<div class="meta">
<div><div class="label">PO number</div><strong class="mono">PO-2026-0381</strong></div>
<div><div class="label">Order date</div>October 10, 2026</div>
<div><div class="label">Deliver by</div>October 24, 2026</div>
<div><div class="label">Payment</div>Net 30</div>
</div>
<div class="parties">
<div class="box"><div class="label">Vendor</div><strong>Northwind Supplies Ltd.</strong><br>14 Harbour Road<br>Dublin D02, Ireland<br>orders@northwind.example</div>
<div class="box"><div class="label">Ship to</div><strong>Your Company Warehouse</strong><br>Pol. Ind. Example, Nave 3<br>08980 Sant Feliu de Llobregat, Spain<br>Receiving: Mon to Fri, 8:00 to 14:00</div>
</div>
<table>
<thead><tr><th>SKU</th><th>Description</th><th class="r">Qty</th><th>Unit</th><th class="r">Unit price</th><th class="r">Total</th></tr></thead>
<tbody>
<tr><td class="mono">NW-1042</td><td>Corrugated boxes, 40×30×20 cm</td><td class="r">500</td><td>ea</td><td class="r">€0.62</td><td class="r">€310.00</td></tr>
<tr><td class="mono">NW-2210</td><td>Packing tape, 48 mm × 66 m, clear</td><td class="r">72</td><td>roll</td><td class="r">€1.15</td><td class="r">€82.80</td></tr>
<tr><td class="mono">NW-3307</td><td>Thermal labels 4×6 in, 500 per roll</td><td class="r">20</td><td>roll</td><td class="r">€9.40</td><td class="r">€188.00</td></tr>
<tr><td class="mono">NW-4019</td><td>Kraft paper void fill, 450 m</td><td class="r">6</td><td>roll</td><td class="r">€24.50</td><td class="r">€147.00</td></tr>
<tr><td class="mono">NW-5120</td><td>Stretch film, 500 mm × 300 m</td><td class="r">12</td><td>roll</td><td class="r">€11.90</td><td class="r">€142.80</td></tr>
</tbody>
</table>
<div class="bottom">
<div><div class="label">Instructions</div>Quote the PO number on every invoice and delivery note. Partial deliveries are accepted. Contact purchasing@yourcompany.example with any changes before shipping.</div>
<table class="totals">
<tr><td class="muted">Subtotal</td><td class="r">€870.60</td></tr>
<tr><td class="muted">Shipping</td><td class="r">€45.00</td></tr>
<tr><td class="muted">VAT (21%)</td><td class="r">€192.28</td></tr>
<tr class="grand"><td>Total</td><td class="r">€1,107.88</td></tr>
</table>
</div>
<div class="sign">
<div>Authorized by</div>
<div>Date</div>
</div>
</body>
</html>
More templates
Invoice · Receipt · Certificate · Report · Resume · Proposal · Packing slip · Shipping label · Event ticket · Quote · Timesheet · all templates