## Professional Invoices from HTML Generating invoices is one of the most common PDF use cases. Instead of wrestling with PDF libraries that use coordinates and drawing commands, you can design invoices with familiar HTML and CSS, then convert them to pixel-perfect PDFs. This tutorial gives you a complete, production-ready invoice template and shows how to generate PDFs with the ToolCenter. ## The Invoice Template Here's a clean, professional invoice template: ```html

Acme Corp

123 Business Street
San Francisco, CA 94102
[email protected]

Invoice

#INV-2026-0042

Bill To

Client Name
456 Client Ave
New York, NY 10001
[email protected]

Invoice Date

February 19, 2026

Due Date

March 19, 2026

Description Qty Rate Amount
Web Development Services
Frontend implementation — React		 40 hrs $150.00 $6,000.00
UI/UX Design
Dashboard redesign		 20 hrs $125.00 $2,500.00
API Integration
Third-party payment gateway		 15 hrs $175.00 $2,625.00
Subtotal$11,125.00
Tax (10%)$1,112.50
Total$12,237.50

Payment Information

Bank: First National Bank | Account: 1234567890 | Routing: 021000021
Please include invoice number in the payment reference.

Thank you for your business! | Questions? Contact [email protected]

``` ## Generating the PDF ### Node.js ```javascript const axios = require('axios'); const fs = require('fs'); async function generateInvoice(invoiceHtml) { const response = await axios.post( 'https://api.toolcenter.dev/v1/pdf', { html: invoiceHtml, format: 'A4', printBackground: true, margin: { top: '0mm', bottom: '0mm', left: '0mm', right: '0mm' }, }, { headers: { 'Authorization': 'Bearer YOUR_API_KEY' }, responseType: 'arraybuffer', } ); return Buffer.from(response.data); } // Generate and save const html = fs.readFileSync('./invoice-template.html', 'utf-8'); const pdf = await generateInvoice(html); fs.writeFileSync('invoice-2026-0042.pdf', pdf); ``` ### Python ```python import requests def generate_invoice(html): response = requests.post( 'https://api.toolcenter.dev/v1/pdf', json={ 'html': html, 'format': 'A4', 'printBackground': True, 'margin': {'top': '0mm', 'bottom': '0mm', 'left': '0mm', 'right': '0mm'}, }, headers={'Authorization': 'Bearer YOUR_API_KEY'} ) return response.content with open('invoice-template.html') as f: html = f.read() pdf = generate_invoice(html) with open('invoice.pdf', 'wb') as f: f.write(pdf) ``` ## Making It Dynamic Use a template engine to populate invoices with real data: ```javascript const Handlebars = require('handlebars'); Handlebars.registerHelper('currency', (value) => { return `$${parseFloat(value).toLocaleString('en-US', { minimumFractionDigits: 2 })}`; }); function renderInvoice(data) { const template = Handlebars.compile(templateSource); const subtotal = data.items.reduce((sum, item) => sum + item.quantity * item.rate, 0); const tax = subtotal * (data.taxRate || 0.1); const total = subtotal + tax; return template({ ...data, subtotal, tax, total, invoiceDate: new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }), }); } // Usage const html = renderInvoice({ invoiceNumber: 'INV-2026-0042', company: { name: 'Acme Corp', address: '123 Business St', email: '[email protected]' }, client: { name: 'Client Name', address: '456 Client Ave', email: '[email protected]' }, items: [ { description: 'Web Development', detail: 'React frontend', quantity: 40, rate: 150 }, { description: 'Design', detail: 'Dashboard redesign', quantity: 20, rate: 125 }, ], taxRate: 0.1, dueDate: 'March 19, 2026', }); const pdf = await generateInvoice(html); ``` ## Customizing the Design ### Change the Color Scheme Replace the accent color throughout the CSS: ```css /* Blue (default) */ .invoice-title h2 { color: #3498db; } .invoice-table th { background: #3498db; } /* Green */ .invoice-title h2 { color: #27ae60; } .invoice-table th { background: #27ae60; } /* Dark/Professional */ .invoice-title h2 { color: #2c3e50; } .invoice-table th { background: #2c3e50; } ``` ### Add a Logo ```html

Acme Corp

``` ### Add a Watermark ```css .invoice::before { content: 'PAID'; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); font-size: 120px; color: rgba(46, 204, 113, 0.1); font-weight: bold; z-index: 0; pointer-events: none; } ``` ## Batch Invoice Generation Generate invoices for all clients at once: ```javascript async function generateMonthlyInvoices(clients) { const results = []; for (const client of clients) { const html = renderInvoice(client); const pdf = await generateInvoice(html); const filename = `invoice-${client.invoiceNumber}.pdf`; fs.writeFileSync(`./invoices/${filename}`, pdf); results.push({ client: client.name, filename }); } return results; } ``` ## Conclusion HTML and CSS give you complete control over invoice design without learning PDF-specific APIs. The ToolCenter PDF API converts your templates into print-ready PDFs with perfect rendering. Start with the template above, customize it to match your brand, and automate invoice generation for your entire client base.