Converting HTML to PDF is one of the most common tasks in web development. Whether you’re generating invoices, creating reports, exporting tickets, or building a document management system, you need a reliable way to turn HTML content into pixel-perfect PDF documents. In this guide, we’ll walk through how to use the ToolCenter PDF API to convert HTML to PDF programmatically, with complete code examples in Python, Node.js, PHP, and cURL. ...
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: <!DOCTYPE html> <html> <head> <style> @page { size: A4; margin: 0; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Helvetica Neue', Arial, sans-serif; color: #333; font-size: 14px; } .invoice { padding: 50px; max-width: 800px; margin: 0 auto; } /* Header */ .invoice-header { display: flex; justify-content: space-between; margin-bottom: 50px; } .company-info h1 { font-size: 28px; color: #2c3e50; margin-bottom: 5px; } .company-info p { color: #7f8c8d; font-size: 13px; line-height: 1.6; } .invoice-title { text-align: right; } .invoice-title h2 { font-size: 36px; color: #3498db; text-transform: uppercase; letter-spacing: 2px; } .invoice-title .invoice-number { font-size: 16px; color: #7f8c8d; margin-top: 5px; } /* Details Grid */ .invoice-details { display: flex; justify-content: space-between; margin-bottom: 40px; } .detail-block h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #95a5a6; margin-bottom: 8px; } .detail-block p { line-height: 1.6; } /* Table */ .invoice-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; } .invoice-table th { background: #3498db; color: white; padding: 12px 15px; text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .invoice-table th:last-child { text-align: right; } .invoice-table td { padding: 12px 15px; border-bottom: 1px solid #ecf0f1; } .invoice-table td:last-child { text-align: right; } .invoice-table .item-desc { font-size: 12px; color: #95a5a6; } /* Totals */ .invoice-totals { display: flex; justify-content: flex-end; } .totals-table { width: 280px; } .totals-table .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #ecf0f1; } .totals-table .total { font-size: 18px; font-weight: bold; color: #2c3e50; border-bottom: 3px solid #3498db; padding: 12px 0; } /* Footer */ .invoice-footer { margin-top: 60px; padding-top: 20px; border-top: 1px solid #ecf0f1; text-align: center; color: #95a5a6; font-size: 12px; } /* Payment Info */ .payment-info { background: #f8f9fa; border-radius: 8px; padding: 20px; margin-top: 30px; } .payment-info h3 { font-size: 14px; color: #2c3e50; margin-bottom: 10px; } .payment-info p { font-size: 13px; color: #666; line-height: 1.6; } </style> </head> <body> <div class="invoice"> <div class="invoice-header"> <div class="company-info"> <h1>Acme Corp</h1> <p>123 Business Street<br>San Francisco, CA 94102<br>[email protected]</p> </div> <div class="invoice-title"> <h2>Invoice</h2> <div class="invoice-number">#INV-2026-0042</div> </div> </div> <div class="invoice-details"> <div class="detail-block"> <h3>Bill To</h3> <p><strong>Client Name</strong><br>456 Client Ave<br>New York, NY 10001<br>[email protected]</p> </div> <div class="detail-block"> <h3>Invoice Date</h3> <p>February 19, 2026</p> <h3 style="margin-top:15px;">Due Date</h3> <p>March 19, 2026</p> </div> </div> <table class="invoice-table"> <thead> <tr> <th>Description</th> <th>Qty</th> <th>Rate</th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td>Web Development Services<br><span class="item-desc">Frontend implementation — React</span></td> <td>40 hrs</td> <td>$150.00</td> <td>$6,000.00</td> </tr> <tr> <td>UI/UX Design<br><span class="item-desc">Dashboard redesign</span></td> <td>20 hrs</td> <td>$125.00</td> <td>$2,500.00</td> </tr> <tr> <td>API Integration<br><span class="item-desc">Third-party payment gateway</span></td> <td>15 hrs</td> <td>$175.00</td> <td>$2,625.00</td> </tr> </tbody> </table> <div class="invoice-totals"> <div class="totals-table"> <div class="row"><span>Subtotal</span><span>$11,125.00</span></div> <div class="row"><span>Tax (10%)</span><span>$1,112.50</span></div> <div class="row total"><span>Total</span><span>$12,237.50</span></div> </div> </div> <div class="payment-info"> <h3>Payment Information</h3> <p>Bank: First National Bank | Account: 1234567890 | Routing: 021000021<br> Please include invoice number in the payment reference.</p> </div> <div class="invoice-footer"> <p>Thank you for your business! | Questions? Contact [email protected]</p> </div> </div> </body> </html> Generating the PDF Node.js 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 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: ...
Why Automate Report Generation? Every business generates reports: sales summaries, analytics dashboards, client deliverables, compliance documents. Doing this manually means hours of copy-pasting data into templates, adjusting formatting, and exporting PDFs. With the ToolCenter HTML-to-PDF API, you can turn any HTML template into a polished PDF in a single API call. Feed it data, get a report. The Architecture The workflow is straightforward: Fetch your data — Database query, API call, or spreadsheet Render HTML template — Inject data into an HTML template Convert to PDF — Send the HTML to ToolCenter Deliver — Email, upload to S3, or serve to users Step 1: Design Your Report Template Create a professional HTML report template: ...
Generating invoices manually is a time sink. Whether you are running a SaaS, freelancing, or managing an e-commerce platform, automating invoice generation saves hours every month and eliminates human error. The best approach? Convert HTML templates to PDF using an API. In this guide, you will learn how to automate invoice generation by designing invoices in HTML and CSS, then converting them to pixel-perfect PDFs programmatically. Why HTML to PDF for Invoices? There are many ways to generate PDFs — libraries like ReportLab (Python), jsPDF (JavaScript), or wkhtmltopdf. But HTML-to-PDF has clear advantages: ...