---
title: "Convert an HTML Invoice to an Image"
description: "Convert an HTML invoice or receipt to a PNG. Full code, common pitfalls and a link to the invoice-image template."
url: "https://html2img.com/docs/examples/invoice-receipt/"
---

# How to Convert an HTML Invoice or Receipt to an Image

Render an invoice or receipt as a PNG. Useful for transactional emails, customer dashboards and accounting integrations.

> **Note**
>
> If you want a pre-built version of this, use the [Invoice image template](https://html2img.com/templates/invoice-image/) for full invoices or the [Receipt image template](https://html2img.com/templates/receipt-image/) for compact receipts. Send line items, totals and party details as JSON and get a tested PNG back. To try it without code, open the [invoice image tool](https://html2img.com/tools/invoice-image/) in your browser.

## HTML Content

```html
<div class="receipt">
    <div class="header">
        <h1>INVOICE</h1>
        <p class="invoice-number">#INV-2025-001</p>
    </div>

    <div class="business-details">
        <h2>ACME Corporation</h2>
        <p>123 Business Street</p>
        <p>San Francisco, CA 94105</p>
        <p>contact@acme.com</p>
    </div>

    <div class="invoice-details">
        <div class="date">
            <strong>Date:</strong> January 8, 2025
        </div>
        <div class="due-date">
            <strong>Due Date:</strong> February 8, 2025
        </div>
    </div>

    <table class="items">
        <thead>
            <tr>
                <th>Item</th>
                <th>Quantity</th>
                <th>Price</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Premium Subscription</td>
                <td>1</td>
                <td>$99.00</td>
                <td>$99.00</td>
            </tr>
            <tr>
                <td>Additional Users</td>
                <td>5</td>
                <td>$10.00</td>
                <td>$50.00</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">Subtotal</td>
                <td>$149.00</td>
            </tr>
            <tr>
                <td colspan="3">Tax (10%)</td>
                <td>$14.90</td>
            </tr>
            <tr class="total">
                <td colspan="3">Total</td>
                <td>$163.90</td>
            </tr>
        </tfoot>
    </table>

    <div class="footer">
        <p>Thank you for your business!</p>
        <div class="payment-info">
            <p><strong>Payment Terms:</strong> Net 30</p>
            <p><strong>Bank Details:</strong> ACME Bank - ACC: 1234567890</p>
        </div>
    </div>
</div>
```

## CSS Styles

```css
body {
    margin: 0;
    padding: 24px;
    background: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #333;
}

.receipt {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 40px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.header {
    text-align: center;
    margin-bottom: 40px;
}

.header h1 {
    margin: 0;
    color: #2c3e50;
    font-size: 32px;
}

.invoice-number {
    color: #7f8c8d;
    font-size: 16px;
    margin: 8px 0 0;
}

.business-details {
    margin-bottom: 30px;
}

.business-details h2 {
    color: #2c3e50;
    margin: 0 0 8px;
}

.business-details p {
    margin: 4px 0;
    color: #666;
}

.invoice-details {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

table.items {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
}

table.items th,
table.items td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

table.items th {
    background: #f8f9fa;
    font-weight: 600;
}

table.items tfoot tr {
    border-top: 2px solid #eee;
}

table.items tfoot tr.total {
    font-weight: bold;
    font-size: 1.1em;
    color: #2c3e50;
}

.footer {
    margin-top: 40px;
    text-align: center;
    color: #666;
}

.payment-info {
    margin-top: 20px;
    font-size: 14px;
}

.payment-info p {
    margin: 4px 0;
}
```

## API Request

```bash
POST https://app.html2img.com/api/html
```

```json
{
    "html": "<div class=\"receipt\"><div class=\"header\"><h1>INVOICE</h1><p class=\"invoice-number\">#INV-2025-001</p></div><div class=\"business-details\"><h2>ACME Corporation</h2><p>123 Business Street</p><p>San Francisco, CA 94105</p><p>contact@acme.com</p></div><div class=\"invoice-details\"><div class=\"date\"><strong>Date:</strong> January 8, 2025</div><div class=\"due-date\"><strong>Due Date:</strong> February 8, 2025</div></div><table class=\"items\"><thead><tr><th>Item</th><th>Quantity</th><th>Price</th><th>Total</th></tr></thead><tbody><tr><td>Premium Subscription</td><td>1</td><td>$99.00</td><td>$99.00</td></tr><tr><td>Additional Users</td><td>5</td><td>$10.00</td><td>$50.00</td></tr></tbody><tfoot><tr><td colspan=\"3\">Subtotal</td><td>$149.00</td></tr><tr><td colspan=\"3\">Tax (10%)</td><td>$14.90</td></tr><tr class=\"total\"><td colspan=\"3\">Total</td><td>$163.90</td></tr></tfoot></table><div class=\"footer\"><p>Thank you for your business!</p><div class=\"payment-info\"><p><strong>Payment Terms:</strong> Net 30</p><p><strong>Bank Details:</strong> ACME Bank - ACC: 1234567890</p></div></div></div>",
    "width": 900,
    "height": 815,
    "css": "body{margin:0;padding:24px;background:white;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;color:#333}.receipt{max-width:800px;margin:0 auto;background:white;padding:40px;box-shadow:0 1px 4px rgba(0,0,0,0.1)}.header{text-align:center;margin-bottom:40px}.header h1{margin:0;color:#2c3e50;font-size:32px}.invoice-number{color:#7f8c8d;font-size:16px;margin:8px 0 0}.business-details{margin-bottom:30px}.business-details h2{color:#2c3e50;margin:0 0 8px}.business-details p{margin:4px 0;color:#666}.invoice-details{display:flex;justify-content:space-between;margin-bottom:30px}table.items{width:100%;border-collapse:collapse;margin:30px 0}table.items th,table.items td{padding:12px;text-align:left;border-bottom:1px solid #eee}table.items th{background:#f8f9fa;font-weight:600}table.items tfoot tr{border-top:2px solid #eee}table.items tfoot tr.total{font-weight:bold;font-size:1.1em;color:#2c3e50}.footer{margin-top:40px;text-align:center;color:#666}.payment-info{margin-top:20px;font-size:14px}.payment-info p{margin:4px 0}"
}
```

> **Note**
>
> Update the invoice details, company information, and styling to match your branding.

## How it Works

1. Clean, professional layout using flexbox and a table
2. Responsive table design for item listing
3. Subtle shadows and borders for visual hierarchy
4. System fonts ensure consistent rendering across platforms

> **Warning**
>
> For invoices with many items, set [fullpage](https://html2img.com/docs/parameters/fullpage/) to true so the rendered PNG matches the content height.

## Code in other languages

### PHP (Laravel)

```php
$response = Http::withHeaders(['X-API-Key' => env('HTML2IMG_API_KEY')])
    ->post('https://app.html2img.com/api/html', [
        'html' => view('invoices.show', compact('invoice'))->render(),
        'css' => $invoiceCss,
        'width' => 900,
        'height' => 815,
    ]);

$url = $response->json('url');
```

### Node.js

```javascript
const response = await fetch('https://app.html2img.com/api/html', {
  method: 'POST',
  headers: { 'X-API-Key': process.env.HTML2IMG_API_KEY, 'Content-Type': 'application/json' },
  body: JSON.stringify({ html: invoiceHtml, css: invoiceCss, width: 900, height: 815 }),
});
const { url } = await response.json();
```

### Python

```python
import os, requests
response = requests.post(
    'https://app.html2img.com/api/html',
    headers={'X-API-Key': os.environ['HTML2IMG_API_KEY']},
    json={'html': invoice_html, 'css': invoice_css, 'width': 900, 'height': 815},
)
url = response.json()['url']
```

## Common pitfalls

- **Currency formatting drifts.** Pre-format every monetary string to the buyer's locale before sending. The renderer does not localise.
- **Long line item descriptions wrap awkwardly.** Cap descriptions at 80 characters or split across two rows.
- **Tax label localisation.** Use a per-customer string ("VAT (20%)", "GST (10%)", "Sales Tax") so the buyer sees the right wording.

## The same invoice as a PDF

The markup above renders as a document too. Drop the sizing fields, add `format` and the response `url` points at a vector A4 file with selectable text:

```javascript
const response = await fetch('https://app.html2img.com/api/html', {
  method: 'POST',
  headers: { 'X-API-Key': process.env.HTML2IMG_API_KEY, 'Content-Type': 'application/json' },
  body: JSON.stringify({ html: invoiceHtml, css: invoiceCss, format: 'pdf' }),
});
const { url } = await response.json(); // ends in .pdf
```

Attach the PDF to the email while the PNG sits in the body, so the customer sees the invoice inline and keeps a printable, searchable copy. The [format parameter docs](https://html2img.com/docs/parameters/format/) cover the details and the [HTML to PDF API](https://html2img.com/html-to-pdf/) page has the overview.

## See also

- [Laravel integration guide](https://html2img.com/integrations/laravel/), [PHP integration guide](https://html2img.com/integrations/php/), [Python integration guide](https://html2img.com/integrations/python/)
- [html parameter](https://html2img.com/docs/parameters/html/), [fullpage parameter](https://html2img.com/docs/parameters/fullpage/), [dpi parameter](https://html2img.com/docs/parameters/dpi/)
- Article: [Browsershot alternatives: HTML to image in Laravel without Puppeteer](https://html2img.com/articles/browsershot-alternative-laravel/)

<script type="application/ld+json" set:html={JSON.stringify({
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to Convert an HTML Invoice or Receipt to an Image",
  "step": [
    { "@type": "HowToStep", "name": "Build invoice markup", "text": "Compose the invoice HTML with party details, line items and totals." },
    { "@type": "HowToStep", "name": "POST to the API", "text": "Send the HTML and CSS to the HTML to Image HTML endpoint." },
    { "@type": "HowToStep", "name": "Use the URL", "text": "Embed the i.html2img.com URL in your transactional email or dashboard." }
  ]
})}></script>