Skip to content

PDF Task

Overview

The PDF Task generates PDF documents from templates with dynamic data. Use it to create invoices, reports, certificates, contracts, proposals, receipts, or any professional document that needs to be generated programmatically.

When to use this task:

  • Generate invoices for orders
  • Create custom reports
  • Issue certificates or credentials
  • Generate contracts with client data
  • Produce proposals and quotes
  • Create receipts and statements
  • Build event tickets
  • Generate branded documents

Key Features:

  • HTML/CSS templates
  • Dynamic data injection
  • Professional styling
  • Page layout control (A4, Letter, etc.)
  • Headers and footers
  • Page numbering
  • Images and logos
  • Tables and lists
  • Multiple pages
  • PDF attachments in emails

[SCREENSHOT NEEDED: PDF task configuration showing template editor and preview]

Quick Start

  1. Add PDF task
  2. Select or create template
  3. Insert dynamic data fields
  4. Configure page settings
  5. Test with sample data
  6. Use PDF in Email or store

Simple Example: 

Template: Invoice
Data:
  Customer: {{task_47001_full_name}}
  Amount: {{task_43001_total}}
  Date: {{task_48001_current_date}}

Output: {{task_36001_pdf_url}}

Template Structure

Basic HTML Template

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 40px;
    }
    .header {
      text-align: center;
      margin-bottom: 30px;
    }
    .content {
      margin: 20px 0;
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>Invoice</h1>
  </div>
  <div class="content">
    <p>Customer: {{customer_name}}</p>
    <p>Amount: {{total_amount}}</p>
  </div>
</body>
</html>

Dynamic Data Injection

Use {{variable}} syntax to insert data:

<p>Dear {{task_47001_first_name}},</p>
<p>Your order {{task_46001_order_id}} has been confirmed.</p>
<p>Total: ${{task_43001_total}}</p>

CSS Styling

Professional invoice style: 

body {
  font-family: 'Helvetica', Arial, sans-serif;
  color: #333;
  line-height: 1.6;
  margin: 0;
  padding: 40px;
}

.invoice-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 2px solid #0066cc;
}

.company-info {
  font-size: 14px;
}

.invoice-meta {
  text-align: right;
  font-size: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

th {
  background: #0066cc;
  color: white;
  padding: 12px;
  text-align: left;
}

td {
  padding: 10px 12px;
  border-bottom: 1px solid #ddd;
}

.total-row {
  background: #f5f5f5;
  font-weight: bold;
  font-size: 16px;
}

Page Layout

Page settings: 

<style>
  @page {
    size: A4;  /* or Letter, Legal */
    margin: 20mm;
  }

  /* Page break control */
  .no-break {
    page-break-inside: avoid;
  }

  .page-break {
    page-break-after: always;
  }
</style>

Headers and Footers

<style>
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: #f8f8f8;
    text-align: center;
    padding: 15px;
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    text-align: center;
    font-size: 10px;
    color: #666;
  }

  /* Content positioning */
  .content {
    margin-top: 80px;
    margin-bottom: 60px;
  }
</style>

<div class="header">
  Company Name | Invoice
</div>

<div class="footer">
  Page <span class="pageNumber"></span> of <span class="totalPages"></span>
</div>

Page Configuration

Page Size

Page Size: A4 (default)

Options: - A4 (210mm × 297mm) - International standard - Letter (8.5" × 11") - US standard - Legal (8.5" × 14") - US legal - A3 (297mm × 420mm) - Large format

Orientation

Orientation: Portrait (default)

Options: - Portrait (vertical) - Landscape (horizontal)

Margins

Top: 20mm
Bottom: 20mm
Left: 15mm
Right: 15mm

Output Fields

Field Description Example
task_36001_pdf_url URL to generated PDF https://storage.../invoice.pdf
task_36001_pdf_filename Generated filename invoice_5560.pdf
task_36001_pdf_size File size in bytes 45678
task_36001_pages Number of pages 2

Real-World Examples

Example 1: Professional Invoice Generator

Workflow: 1. CRM Trigger - Order created 2. MySQL Query - Get order details and items 3. Formatter - Format dates and currency 4. Loop - Calculate totals 5. PDF - Generate invoice 6. Email - Send invoice to customer

Template: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 40px;
      color: #333;
    }
    .invoice-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;
      padding-bottom: 20px;
      border-bottom: 3px solid #0066cc;
    }
    .company-logo {
      width: 150px;
    }
    .invoice-details {
      text-align: right;
    }
    .invoice-number {
      font-size: 24px;
      color: #0066cc;
      font-weight: bold;
    }
    .bill-to {
      margin: 30px 0;
      padding: 20px;
      background: #f8f8f8;
      border-radius: 5px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
    }
    th {
      background: #0066cc;
      color: white;
      padding: 12px;
      text-align: left;
      font-weight: normal;
    }
    td {
      padding: 12px;
      border-bottom: 1px solid #ddd;
    }
    .text-right {
      text-align: right;
    }
    .totals {
      margin-top: 20px;
      text-align: right;
    }
    .totals table {
      margin-left: auto;
      width: 300px;
    }
    .totals td {
      border: none;
      padding: 8px;
    }
    .grand-total {
      font-size: 18px;
      font-weight: bold;
      background: #f0f0f0;
    }
    .footer {
      margin-top: 50px;
      padding-top: 20px;
      border-top: 1px solid #ddd;
      font-size: 11px;
      color: #666;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="invoice-header">
    <div class="company-info">
      <img src="{{company_logo_url}}" class="company-logo" />
      <p><strong>Your Company Name</strong><br>
      123 Business Street<br>
      City, State 12345<br>
      Phone: (555) 123-4567<br>
      Email: billing@company.com</p>
    </div>
    <div class="invoice-details">
      <div class="invoice-number">INVOICE #{{task_47001_invoice_number}}</div>
      <p><strong>Date:</strong> {{task_6001_formatted}}<br>
      <strong>Due Date:</strong> {{task_6002_formatted}}</p>
    </div>
  </div>

  <div class="bill-to">
    <strong>BILL TO:</strong><br>
    {{task_47001_full_name}}<br>
    {{task_47001_company_name}}<br>
    {{task_47001_address}}<br>
    {{task_47001_email}}<br>
    {{task_47001_phone}}
  </div>

  <table>
    <thead>
      <tr>
        <th>Description</th>
        <th class="text-right">Qty</th>
        <th class="text-right">Unit Price</th>
        <th class="text-right">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{{task_43001_row_1_description}}</td>
        <td class="text-right">{{task_43001_row_1_quantity}}</td>
        <td class="text-right">${{task_43001_row_1_unit_price}}</td>
        <td class="text-right">${{task_43001_row_1_total}}</td>
      </tr>
      <tr>
        <td>{{task_43001_row_2_description}}</td>
        <td class="text-right">{{task_43001_row_2_quantity}}</td>
        <td class="text-right">${{task_43001_row_2_unit_price}}</td>
        <td class="text-right">${{task_43001_row_2_total}}</td>
      </tr>
    </tbody>
  </table>

  <div class="totals">
    <table>
      <tr>
        <td>Subtotal:</td>
        <td class="text-right">${{task_42001_subtotal}}</td>
      </tr>
      <tr>
        <td>Tax ({{task_42001_tax_rate}}%):</td>
        <td class="text-right">${{task_42001_tax_amount}}</td>
      </tr>
      <tr class="grand-total">
        <td>Total:</td>
        <td class="text-right">${{task_42001_grand_total}}</td>
      </tr>
    </table>
  </div>

  <div class="footer">
    <p>Payment Terms: Net 30 days<br>
    Please make checks payable to: Your Company Name<br>
    Thank you for your business!</p>
  </div>
</body>
</html>

Email with PDF: 

To: {{task_47001_email}}
Subject: Invoice #{{task_47001_invoice_number}} from Your Company
Attachments: {{task_36001_pdf_url}}

Body:
Dear {{task_47001_first_name}},

Thank you for your business! Your invoice is attached.

Invoice #: {{task_47001_invoice_number}}
Amount Due: ${{task_42001_grand_total}}
Due Date: {{task_6002_formatted}}

Please remit payment at your earliest convenience.

Best regards,
Accounts Team

Example 2: Monthly Report Generation

Workflow: 1. Schedule Trigger - Last day of month 2. MySQL Query - Get month's data 3. Code Task - Calculate metrics 4. PDF - Generate report 5. Email - Send to management

Template (Summary): 

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 40px;
    }
    h1 {
      color: #0066cc;
      border-bottom: 2px solid #0066cc;
      padding-bottom: 10px;
    }
    .metric-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin: 30px 0;
    }
    .metric-card {
      background: #f8f8f8;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
    }
    .metric-value {
      font-size: 36px;
      color: #0066cc;
      font-weight: bold;
    }
    .metric-label {
      color: #666;
      margin-top: 10px;
    }
    .chart-placeholder {
      height: 300px;
      background: #e0e0e0;
      margin: 20px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
    }
  </style>
</head>
<body>
  <h1>Monthly Business Report - {{task_48001_current_month_name}} {{task_48001_current_year}}</h1>

  <div class="metric-grid">
    <div class="metric-card">
      <div class="metric-value">{{task_42001_total_revenue}}</div>
      <div class="metric-label">Total Revenue</div>
    </div>
    <div class="metric-card">
      <div class="metric-value">{{task_42001_new_customers}}</div>
      <div class="metric-label">New Customers</div>
    </div>
    <div class="metric-card">
      <div class="metric-value">{{task_42001_orders}}</div>
      <div class="metric-label">Orders</div>
    </div>
  </div>

  <h2>Key Highlights</h2>
  <ul>
    <li>Revenue grew {{task_42001_revenue_growth}}% compared to last month</li>
    <li>Top product: {{task_43001_top_product}} ({{task_43001_top_product_sales}} sales)</li>
    <li>Average order value: ${{task_42001_avg_order_value}}</li>
    <li>Customer retention rate: {{task_42001_retention_rate}}%</li>
  </ul>

  <h2>Top 10 Customers</h2>
  <table>
    <tr>
      <th>Customer</th>
      <th>Orders</th>
      <th>Revenue</th>
    </tr>
    <!-- Loop through top customers -->
    <tr>
      <td>{{task_43001_row_1_customer_name}}</td>
      <td>{{task_43001_row_1_orders}}</td>
      <td>${{task_43001_row_1_revenue}}</td>
    </tr>
  </table>
</body>
</html>

Example 3: Certificate Generator

Workflow: 1. CRM Trigger - Course completed 2. Formatter - Format completion date 3. PDF - Generate certificate 4. Email - Send certificate

Template: 

<!DOCTYPE html>
<html>
<head>
  <style>
    @page { size: A4 landscape; margin: 0; }
    body {
      margin: 0;
      padding: 60px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .certificate {
      background: white;
      padding: 60px;
      border: 10px solid gold;
      width: 100%;
      max-width: 800px;
      text-align: center;
      box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    }
    h1 {
      font-family: 'Georgia', serif;
      font-size: 48px;
      color: #333;
      margin: 20px 0;
      text-transform: uppercase;
      letter-spacing: 2px;
    }
    .subtitle {
      font-size: 18px;
      color: #666;
      margin: 20px 0;
    }
    .recipient-name {
      font-family: 'Georgia', serif;
      font-size: 36px;
      color: #667eea;
      margin: 30px 0;
      font-style: italic;
    }
    .course-name {
      font-size: 24px;
      color: #333;
      margin: 20px 0;
      font-weight: bold;
    }
    .date {
      font-size: 14px;
      color: #999;
      margin-top: 40px;
    }
    .signature-line {
      margin: 50px auto 10px;
      width: 300px;
      border-top: 2px solid #333;
      padding-top: 10px;
    }
  </style>
</head>
<body>
  <div class="certificate">
    <h1>Certificate of Completion</h1>
    <div class="subtitle">This certifies that</div>
    <div class="recipient-name">{{task_47001_full_name}}</div>
    <div class="subtitle">has successfully completed</div>
    <div class="course-name">{{task_47001_custom_course_name}}</div>
    <div class="subtitle">achieving a score of {{task_47001_custom_final_score}}%</div>

    <div class="signature-line">
      <strong>Instructor Name</strong><br>
      Course Instructor
    </div>

    <div class="date">
      Completed on {{task_6001_formatted}}<br>
      Certificate ID: {{task_47001_contact_id}}-{{task_48001_current_timestamp}}
    </div>
  </div>
</body>
</html>

Example 4: Contract Generation

Workflow: 1. CRM Trigger - Deal won 2. MySQL Query - Get contract terms 3. PDF - Generate contract 4. Email - Send for signature

Template (Simplified): 

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: 'Times New Roman', serif;
      line-height: 1.8;
      padding: 40px;
      font-size: 12px;
    }
    h1 {
      text-align: center;
      font-size: 20px;
      margin-bottom: 30px;
    }
    .section {
      margin: 20px 0;
    }
    .section-title {
      font-weight: bold;
      margin-top: 20px;
    }
    .signature-block {
      margin-top: 60px;
      display: flex;
      justify-content: space-between;
    }
    .signature-line {
      width: 45%;
      border-top: 1px solid #000;
      padding-top: 10px;
      margin-top: 50px;
    }
  </style>
</head>
<body>
  <h1>SERVICE AGREEMENT</h1>

  <p>This Service Agreement ("Agreement") is entered into as of {{task_6001_formatted}} ("Effective Date") by and between:</p>

  <div class="section">
    <strong>Service Provider:</strong> Your Company Name<br>
    Address: 123 Business St, City, State 12345<br>
    <br>
    <strong>Client:</strong> {{task_47001_full_name}}<br>
    Company: {{task_47001_company_name}}<br>
    Address: {{task_47001_address}}
  </div>

  <div class="section">
    <div class="section-title">1. SERVICES</div>
    <p>The Service Provider agrees to provide the following services:</p>
    <p>{{task_43001_services_description}}</p>
  </div>

  <div class="section">
    <div class="section-title">2. COMPENSATION</div>
    <p>Total Contract Value: ${{task_43001_contract_value}}</p>
    <p>Payment Terms: {{task_43001_payment_terms}}</p>
    <p>Payment Schedule:</p>
    <ul>
      <li>Initial Payment: ${{task_43001_initial_payment}} (Due upon signing)</li>
      <li>Monthly Payments: ${{task_43001_monthly_payment}}</li>
    </ul>
  </div>

  <div class="section">
    <div class="section-title">3. TERM</div>
    <p>This Agreement shall commence on {{task_6001_formatted}} and continue for a period of {{task_43001_contract_term}} months, unless terminated earlier in accordance with the provisions herein.</p>
  </div>

  <div class="section">
    <div class="section-title">4. TERMINATION</div>
    <p>Either party may terminate this Agreement with {{task_43001_notice_period}} days written notice.</p>
  </div>

  <div class="signature-block">
    <div class="signature-line">
      <strong>Service Provider</strong><br>
      By: _______________________<br>
      Name: Authorized Signatory<br>
      Date: _____________________
    </div>
    <div class="signature-line">
      <strong>Client</strong><br>
      By: _______________________<br>
      Name: {{task_47001_full_name}}<br>
      Date: _____________________
    </div>
  </div>
</body>
</html>

Example 5: Event Ticket with QR Code

Workflow: 1. Form Submission - Event registration 2. Code Task - Generate unique ticket ID and QR URL 3. PDF - Generate ticket 4. Email - Send ticket

Template: 

<!DOCTYPE html>
<html>
<head>
  <style>
    @page { size: A6; margin: 0; }
    body {
      margin: 0;
      padding: 20px;
      background: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
      height: 100%;
    }
    .ticket {
      background: white;
      border-radius: 15px;
      padding: 30px;
      text-align: center;
      box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    }
    .event-name {
      font-size: 24px;
      font-weight: bold;
      color: #333;
      margin-bottom: 10px;
    }
    .event-details {
      font-size: 14px;
      color: #666;
      margin: 15px 0;
    }
    .attendee-name {
      font-size: 18px;
      font-weight: bold;
      color: #4facfe;
      margin: 20px 0;
    }
    .qr-code {
      margin: 20px auto;
    }
    .ticket-id {
      font-size: 12px;
      color: #999;
      margin-top: 15px;
    }
  </style>
</head>
<body>
  <div class="ticket">
    <div class="event-name">{{task_49001_event_name}}</div>

    <div class="event-details">
      📅 {{task_6001_formatted_date}}<br>
      🕐 {{task_49001_event_time}}<br>
      📍 {{task_49001_venue}}
    </div>

    <div class="attendee-name">{{task_49001_full_name}}</div>

    <div class="qr-code">
      <img src="{{task_42001_qr_code_url}}" width="150" height="150" />
    </div>

    <div class="ticket-id">
      Ticket #{{task_42001_ticket_id}}<br>
      Ticket Type: {{task_49001_ticket_type}}
    </div>
  </div>
</body>
</html>

Best Practices

Template Design

  1. Use standard fonts - Arial, Helvetica, Times for compatibility
  2. Test on different sizes - A4 vs Letter
  3. Consider printing - Use print-safe colors
  4. Responsive tables - Tables adapt to content
  5. Page breaks - Control where pages break

Data Management

  1. Validate before PDF - Check all required fields exist
  2. Format data first - Use Formatter tasks for dates/currency
  3. Provide defaults - Handle missing data gracefully
  4. Escape HTML - Prevent injection in dynamic content
  5. Test with real data - Use actual production examples

Performance

  1. Optimize images - Compress logos and graphics
  2. Simple CSS - Avoid complex layouts
  3. Limit page count - Split large documents
  4. Cache templates - Reuse common templates
  5. Async generation - Don't block workflow

Quality

  1. Professional styling - Match brand guidelines
  2. Consistent formatting - Same fonts/colors throughout
  3. Proper alignment - Tables and text aligned
  4. White space - Don't cram content
  5. Proofread - Check spelling and grammar

Troubleshooting

PDF Not Generating

Check: 1. Template HTML valid? 2. All variables have data? 3. CSS syntax correct? 4. Page size configured?

Debug: Test template with static data first

Content Cut Off

Issue: Text or tables cut off at edges

Solutions: - Increase page margins - Reduce content font size - Use page-break-inside: avoid for tables - Split across multiple pages

Images Not Showing

Issue: Logo or images missing

Causes: - Invalid image URL - Image not publicly accessible - Wrong image format

Solutions: - Use full HTTPS URLs - Host images on CDN - Use base64 encoded images - Test image URL in browser

Styling Not Applied

Issue: CSS not rendering

Check: - CSS in <style> tag in <head>? - Valid CSS syntax? - Specificity correct? - PDF engine limitations?

Note: Some advanced CSS may not be supported. Test thoroughly.

Variables Empty

Issue: {{variable}} shows as empty

Check: - Variable name correct? - Previous task executed successfully? - Data exists in source task?

Debug: View execution history of previous tasks

Frequently Asked Questions

What HTML/CSS is supported?

Most standard HTML4/CSS2. Limited CSS3 support. Test complex layouts thoroughly.

Can I use external CSS files?

No, CSS must be inline in <style> tags.

Can I use JavaScript?

No, PDFs are static. All logic must be in workflow.

What's maximum PDF size?

Recommended under 10MB. Large PDFs may timeout.

Can I add digital signatures?

Not natively. Use third-party signing service after generation.

Can I password protect PDFs?

Check BaseCloud documentation for password protection options.

How to add barcodes?

Generate barcode image URL (with Code task), then include as <img> in template.

Can I merge multiple PDFs?

Not directly. Generate separate PDFs or include all content in one template.

  • Formatter - Format dates/currency for PDF
  • Code Task - Generate dynamic content/QR codes
  • Email Task - Send PDF as attachment
  • MySQL Query - Get data for PDF
  • Loop Task - Generate multiple PDFs