Common Use Cases

Invoice Generation

Generate professional invoices with custom branding and styling:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 40px;
    }
    .header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
    }
    .invoice-details {
      margin-bottom: 30px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 12px;
      text-align: left;
    }
    th {
      background-color: #f4f4f4;
    }
    .total {
      text-align: right;
      margin-top: 20px;
      font-size: 18px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="header">
    <div>
      <h1>INVOICE</h1>
      <p>Invoice #: 12345</p>
      <p>Date: December 19, 2025</p>
    </div>
    <div>
      <strong>Your Company Name</strong><br>
      123 Business Street<br>
      City, State 12345<br>
      [email protected]
    </div>
  </div>

  <div class="invoice-details">
    <strong>Bill To:</strong><br>
    Customer Name<br>
    456 Customer Avenue<br>
    City, State 67890
  </div>

  <table>
    <thead>
      <tr>
        <th>Description</th>
        <th>Quantity</th>
        <th>Price</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Service A</td>
        <td>2</td>
        <td>$50.00</td>
        <td>$100.00</td>
      </tr>
      <tr>
        <td>Service B</td>
        <td>1</td>
        <td>$150.00</td>
        <td>$150.00</td>
      </tr>
    </tbody>
  </table>

  <div class="total">
    Total: $250.00
  </div>
</body>
</html>

Report Generation

Create data-rich reports with charts and tables:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 40px;
    }
    h1 {
      color: #333;
      border-bottom: 3px solid #007bff;
      padding-bottom: 10px;
    }
    .summary {
      background: #f8f9fa;
      padding: 20px;
      margin: 20px 0;
      border-left: 4px solid #007bff;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 12px;
      text-align: left;
    }
    th {
      background-color: #007bff;
      color: white;
    }
  </style>
</head>
<body>
  <h1>Monthly Sales Report</h1>

  <div class="summary">
    <h2>Executive Summary</h2>
    <p>Total Revenue: $125,000</p>
    <p>Growth: +15% from previous month</p>
  </div>

  <h2>Sales by Region</h2>
  <table>
    <thead>
      <tr>
        <th>Region</th>
        <th>Revenue</th>
        <th>Growth</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>North</td>
        <td>$45,000</td>
        <td>+12%</td>
      </tr>
      <tr>
        <td>South</td>
        <td>$38,000</td>
        <td>+8%</td>
      </tr>
      <tr>
        <td>East</td>
        <td>$25,000</td>
        <td>+20%</td>
      </tr>
      <tr>
        <td>West</td>
        <td>$17,000</td>
        <td>+18%</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Best Practices

Use inline CSS: External stylesheets may not load reliably. Use <style> tags in the <head> or inline styles
Embed images: Convert images to base64 data URIs or use absolute HTTPS URLs
Valid HTML: Use proper HTML structure with DOCTYPE declaration
Page size: Design for Letter size (8.5″ × 11″) format

Common Use Cases ​

Invoice Generation ​

Report Generation ​

Best Practices ​

Common Use Cases

Invoice Generation

Report Generation

Best Practices