# generate-pdf

{% columns %}
{% column %}
The generate-pdf action allows you to quickly create a PDF file version of HTML content, whether a receipt, report, form, or other document.

The URI of the generated file is returned and is available as part of the action instance output. When you tap the button, the app compiles the necessary information and generates a file you can save, or share instantly.
{% endcolumn %}

{% column %}

<figure><img src="/files/DNuVDUOdwycCpdMmcZvp" alt="Generate a PDF file" width="170"><figcaption><p>Generate a PDF file</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

## Configuration options

Some properties are common to all components, see [Common component properties](/examples/readme/actions/generate-pdf.md) for a list and their configuration options.

<table><thead><tr><th width="140.71875">Core structure</th><th></th></tr></thead><tbody><tr><td><code>html</code></td><td>Use standard HTML elements to ensure optimal formatting and compatibility when rendering content in the PDF file, for example, &#x3C;html>&#x3C;body>Invoices are provided monthly.&#x3C;/body&#x3C;/html>. The HTML can be built up using JSONata or JavaScript.</td></tr><tr><td><code>fileName</code></td><td>Give the PDF a name, this name is used as the local file name, and is referenced as part of the uri, which can be accessed via the action's instance output (<code>=@ctx.actions.generatePDF.outputs.uri</code>). The .pdf extension is automatically added to the <code>fileName</code>.</td></tr><tr><td><code>title</code></td><td>Provide the action button with a title, for example, Invoice.</td></tr></tbody></table>

<table><thead><tr><th width="149.015625">Other options</th><th></th></tr></thead><tbody><tr><td><code>icon</code></td><td>Select a icon to display when the action is configured as the secondary button or in a <a href="/pages/DRQfvKWYUoQBz1pNkHLL">jig-header</a>.</td></tr><tr><td><code>isHidden</code></td><td><code>true</code> hides the action button, <code>false</code> shows the action button. Default setting is <code>false</code>.</td></tr><tr><td><code>styles</code></td><td><ul><li><code>isDanger</code> - Styles the action button in red or your brand's designated danger color.</li><li><code>isDisabled</code> - Displays the action button as greyed out.</li><li><code>isPrimary</code> - Styles the action button in blue or your brand's designated primary color.</li><li><code>isSecondary</code> - Sets the action as a secondary button, accessible via the ellipsis. The <code>icon</code> property can be used when the action button is displayed as a secondary button.</li></ul></td></tr></tbody></table>

## Considerations

* You can reference the local PDF file using the action's output uri in other actions or components, `=@ctx.actions.generatePDF.outputs.uri`. For example, generate the PDF file then [share](/examples/readme/actions/share.md) the file.
* Depending on where you save and use the saved PDF, you might need to use [conversions](https://docs.jigx.com/building-apps-with-jigx/data/file-handling).
* The .pdf extension is automatically added to the `fileName`.

## Examples and code snippets

### Basic generate a PDF and share

{% columns %}
{% column %}

<figure><img src="/files/DNuVDUOdwycCpdMmcZvp" alt="Generate and share PDF" width="170"><figcaption><p>Generate and share PDF</p></figcaption></figure>
{% endcolumn %}

{% column %}
In this example, an action list contains two actions: the first generates a PDF of a checklist, the second shares the PDF via a messaging app on the device.

**Example:** See the full code sample in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/jigx-actions/generate-pdf/action-generate-pdf.jigx).
{% endcolumn %}
{% endcolumns %}

{% tabs %}
{% tab title="action-generate-pdf.jigx" %}

```yaml
title: Site Checklist
type: jig.document
  
source:
  documentType: HTML
  # Use a datasource with the required raw HTML
  content: =@ctx.datasources.html-data.checklist-html
# Create an action list that will first create the PDF from the HTML,
# secondly share the pdf file via one of the devices messaging apps.          
actions:
  - children:
      - type: action.action-list
        options:
          title: Send checklist
          isSequential: true
          actions:
            # First action to create the pdf.
            - type: action.generate-pdf
              # Add an instanceId to use in the actions output expression.
              instanceId: share-pdf
              options: 
                # Provide the HTML of the checklist.  
                html: =@ctx.datasources.html-data.checklist-html
                # Provide the name of the pdf
                fileName: foreman-checklist
            # Add the second action to share out the pdf,
            # on one of the devices messaging apps.    
            - type: action.share
              options: 
                message: Completed morning checks on Site B
                subject: Site checks complete
                # Use the action instance output to reference the file.
                fileUri: =@ctx.actions.share-pdf.outputs.uri             
```

{% endtab %}

{% tab title="datasource (HTML)" %}

```yaml
# Use a datasource with the required HTML
datasources:
    html-data:
      type: datasource.static
      options:
        data:
          - id: 1
            checklist-html: |
              <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>Construction Site Checklist</title>
                    <style>
                        body {
                            font-family: Arial, sans-serif;
                            margin: 20px;
                            padding: 20px;
                            background-color: #f4f4f4;
                        }
                        .checklist {
                            background: #fff;
                            padding: 20px;
                            border-radius: 5px;
                            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                        }
                        h2 {
                            text-align: center;
                        }
                        ul {
                            list-style: none;
                            padding: 0;
                        }
                        li {
                            margin: 10px 0;
                        }
                        input[type="checkbox"] {
                            margin-right: 10px;
                        }
                    </style>
                </head>
                <body>
                    <div class="checklist">
                        <h2>Construction Site Checklist</h2>
                        <ul>
                            <li><input type="checkbox"> Safety gear checked (helmets, vests, gloves, etc.)</li>
                            <li><input type="checkbox"> Equipment inspected and functional</li>
                            <li><input type="checkbox"> Site hazards identified and secured</li>
                            <li><input type="checkbox"> Workers briefed on tasks and safety</li>
                            <li><input type="checkbox"> Materials delivered and accounted for</li>
                            <li><input type="checkbox"> Work permits and documentation verified</li>
                            <li><input type="checkbox"> Emergency procedures reviewed</li>
                            <li><input type="checkbox"> Waste disposal managed</li>
                            <li><input type="checkbox"> Final site walk-through completed</li>
                        </ul>
                    </div>
                </body>
                </html>
```

{% endtab %}
{% endtabs %}

### Generate a pdf, save and share

{% columns %}
{% column %}
In this example, an action list contains three actions: the first generates a PDF for an invoice, the second saves it to the database, and the third shares the PDF via a messaging app on the device. When saving the file to the database the file is converted from local-uri to data-uri for storage.

**Example:** See the full code sample in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/jigx-actions/generate-pdf/action-generate-pdf-save-share.jigx).
{% endcolumn %}

{% column %}

<figure><img src="/files/MXRIq5bIvMyd3hs2hKZ3" alt="Generate PDF, save &#x26; share" width="170"><figcaption><p>Generate PDF, save &#x26; share</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% code title="action-generate-pdf-save-share.jigx" %}

```yaml
title: Monthly invoicing
description: Provide you details
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children: 
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGludm9pY2luZ3xlbnwwfHwwfHx8MA%3D%3D    
  
children:
  - type: component.section
    options:
      title: Details
      children: 
        - type: component.form
          instanceId: inputValues
          options:
            children:
              - type: component.text-field
                instanceId: firstName
                options:
                  initialValue: John Smith
                  label: First name
                  isRequired: false
              - type: component.email-field
                instanceId: email
                options:
                  initialValue: john.smith@global.com
                  label: Email address
              - type: component.number-field
                instanceId: phoneNumber
                options:
                  initialValue: 23445634556
                  label: Mobile number
# Create an action list that will first create the PDF from the HTML,
# secondly save the PDF file to the dynamic database,
# thirdly share the pdf file via one of the devices messaging apps.                  
actions:
  - children:
      - type: action.action-list
        options:
          title: Send Invoice
          isSequential: true
          actions:
           # First action to generate the pdf.
            - type: action.generate-pdf
              instanceId: generate-pdf-id
              options:
                # Provide the HTML for the PDF file.
                html: |
                  <!DOCTYPE html>
                    <html lang="en">
                    <head>
                      <meta charset="UTF-8">
                      <meta name="viewport" content="width=device-width, initial-scale=1.0">
                      <title>Invoice</title>
                      <style>
                        body {
                          font-family: 'Arial', sans-serif;
                          margin: 0;
                          padding: 20px;
                          background-color: #f6f6f6;
                        }
                        .invoice-box {
                          max-width: 800px;
                          margin: auto;
                          padding: 30px;
                          border: 1px solid #eee;
                          box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
                          background-color: #fff;
                          color: #555;
                        }
                        .invoice-box table {
                          width: 100%;
                          line-height: 1.6;
                          text-align: left;
                          border-collapse: collapse;
                        }
                        .invoice-box table td {
                          padding: 5px;
                          vertical-align: top;
                        }
                        .invoice-box table tr td:nth-child(2) {
                          text-align: right;
                        }
                        .invoice-box table tr.top table td {
                          padding-bottom: 20px;
                        }
                        .invoice-box table tr.information table td {
                          padding-bottom: 40px;
                        }
                        .invoice-box table tr.heading td {
                          background: #eee;
                          border-bottom: 1px solid #ddd;
                          font-weight: bold;
                        }
                        .invoice-box table tr.details td {
                          padding-bottom: 20px;
                        }
                        .invoice-box table tr.item td {
                          border-bottom: 1px solid #eee;
                        }
                        .invoice-box table tr.item.last td {
                          border-bottom: none;
                        }
                        .invoice-box table tr.total td:nth-child(2) {
                          border-top: 2px solid #eee;
                          font-weight: bold;
                        }
                        h2, h3 {
                          margin: 0;
                        }
                      </style>
                    </head>
                    <body>
                      <div class="invoice-box">
                        <table cellpadding="0" cellspacing="0">
                          <!-- Invoice Header -->
                          <tr class="top">
                            <td colspan="2">
                              <table>
                                <tr>
                                  <td class="title">
                                    <h2>Company Name</h2>
                                  </td>
                                  <td>
                                    Invoice #: 12345<br>
                                    Created: January 1, 2025<br>
                                    Due: January 31, 2025
                                  </td>
                                </tr>
                              </table>
                            </td>
                          </tr>
                          <!-- Company & Customer Information -->
                          <tr class="information">
                            <td colspan="2">
                              <table>
                                <tr>
                                  <td>
                                    Company Name, Inc.<br>
                                    12345 Street Address<br>
                                    City, State, Zip
                                  </td>
                                  <td>
                                    Customer Name<br>
                                    Customer Company<br>
                                    67890 Customer Address
                                  </td>
                                </tr>
                              </table>
                            </td>
                          </tr>
                          <!-- Payment Method Details -->
                          <tr class="heading">
                            <td>Payment Method</td>
                            <td>Check #</td>
                          </tr>
                          <tr class="details">
                            <td>Check</td>
                            <td>1001</td>
                          </tr>
                          <!-- Itemized List of Services/Products -->
                          <tr class="heading">
                            <td>Item</td>
                            <td>Price</td>
                          </tr>
                          <tr class="item">
                            <td>Website Design</td>
                            <td>$300.00</td>
                          </tr>
                          <tr class="item">
                            <td>Hosting (3 months)</td>
                            <td>$75.00</td>
                          </tr>
                          <tr class="item last">
                            <td>Domain Registration (1 year)</td>
                            <td>$10.00</td>
                          </tr>
                          <!-- Total -->
                          <tr class="total">
                            <td></td>
                            <td>Total: $385.00</td>
                          </tr>
                        </table>
                      </div>
                    </body>
                    </html>
                # Give the pdf a name that is used when saved or shared.  
                fileName: invoice-1
            # Second action to save the file to the Dynamic database.   
            - type: action.execute-entity
              options: 
                provider: DATA_PROVIDER_DYNAMIC
                entity: default/documents
                method: create
                data:
                  # Enter the file name for database storage.
                  fileName: invoice
                  date: =$now()
                # Use the action instance output to reference the file
                # that is saved in dynamic data files.  
                file:
                  localPath: =@ctx.actions.generate-pdf-id.outputs.uri
            # Third action to share the file via the device's messaging app.        
            - type: action.share
              options:
                # Use the action instance output to reference the file.
                fileUri: =@ctx.actions.generate-pdf-id.outputs.uri
                # Provide a message and subject to accompany the share.
                message: Global Invoice 
                subject: Invoice for January
```

{% endcode %}

### Generate pdf from JavaScript HTML function

This example demonstrates how to use a JavaScript function to generate an HTML invoice. The invoice is populated with customer details retrieved from a Dynamic Data datasource named invoices. The JavaScript function is referenced in an expression used by `action.generate-pdf`, after which the invoice is shared using the `action.share` via the device's apps.

**Example:** See the full code sample in [GitHub](https://github.com/jigx-com/jigx-samples/blob/main/quickstart/jigx-samples/jigs/jigx-actions/generate-pdf/action-generate-pdf-javascript.jigx).

<figure><img src="/files/D8nUoqpfzlhEzR8LuO0b" alt="PDF from JavaScript function"><figcaption><p>PDF from JavaScript function</p></figcaption></figure>

{% tabs %}
{% tab title="action-pdf-javascript.jigx" %}

```yaml
title: Monthly invoicing
description: Provide your details
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children: 
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGludm9pY2luZ3xlbnwwfHwwfHx8MA%3D%3D    
      
children:
  - type: component.section
    options:
      title: Details
      children: 
        - type: component.form
          instanceId: inputValues
          options:
            children:
              - type: component.text-field
                instanceId: customerCompany
                options:
                  initialValue: =@ctx.datasources.customer.customerCompany
                  label: First name
                  isRequired: false
              - type: component.text-field
                instanceId: firstName
                options:
                  initialValue: =@ctx.datasources.customer.firstName
                  label: First name
                  isRequired: false
              - type: component.email-field
                instanceId: email
                options:
                  initialValue: =@ctx.datasources.customer.email
                  label: Email address
              - type: component.number-field
                instanceId: phoneNumber
                options:
                  initialValue: =@ctx.datasources.customer.phoneNumber
                  label: Mobile number
# Create an action list that creates the PDF from the JavaScript HTML function,
# secondly share the pdf file via one of the devices apps.                      
actions:
  - children:
      - type: action.action-list
        options:
          title: Send Invoice
          isSequential: true
          actions:
            # First action to create the pdf.
            - type: action.generate-pdf
              instanceId: generate-pdf-id
              options:
                # Reference the JavaScript HTML function in an expression,
                # and provide the reference to the datasource for the inputs.
                html: 
                   =$html.generateHTML(@ctx.datasources.customer) 
                # Provide the name of the pdf.   
                fileName: invoice
            # Save the PDF to the database.    
            - type: action.execute-entity
              options: 
                provider: DATA_PROVIDER_DYNAMIC
                entity: default/documents
                method: create
                data:
                  fileName: invoice
                  date: =$now()
                file:
                  # Use the action instance output to reference the file
                  # that is stored in Dynamic data files.
                  localPath: =@ctx.actions.generate-pdf-id.outputs.uri
            # Add the second action to share out the pdf,
            # on one of the devices apps.       
            - type: action.share
              options:
                # Use the action instance output to reference the file.
                fileUri: =@ctx.actions.generate-pdf-id.outputs.uri
                message: Global Invoice 
                subject: Invoice for January 
```

{% endtab %}

{% tab title="datasource" %}

```yaml
datasources:
  
  customer:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      # Use isDocument true to record a single record.
      isDocument: true
      entities:
        - default/invoices
      query: |
        SELECT 
          id,
          '$.firstName',
          '$.email', 
          '$.phoneNumber',
          '$.customerCompany',
          '$.address'
        FROM [default/invoices] 
        WHERE firstName = 'John Smith'
```

{% endtab %}

{% tab title="html.js" %}

```javascript
// Create a JS function that generates HTML, reference the input fields from
// the datasource.
export function generateHTML(invoiceInfo) {
    const { firstName, customerCompany, address } = invoiceInfo;
// Specify what must be returned.
return `
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice</title>
    <style>
            body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f6f6f6;
            }
            .invoice-box {
            max-width: 800px;
            margin: auto;
            padding: 30px;
            border: 1px solid #eee;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
            background-color: #fff;
            color: #555;
            }
            .invoice-box table {
            width: 100%;
            line-height: 1.6;
            text-align: left;
            border-collapse: collapse;
            }
            .invoice-box table td {
            padding: 5px;
            vertical-align: top;
            }
            .invoice-box table tr td:nth-child(2) {
            text-align: right;
            }
            .invoice-box table tr.top table td {
            padding-bottom: 20px;
            }
            .invoice-box table tr.information table td {
            padding-bottom: 40px;
            }
            .invoice-box table tr.heading td {
            background: #eee;
            border-bottom: 1px solid #ddd;
            font-weight: bold;
            }
            .invoice-box table tr.details td {
            padding-bottom: 20px;
            }
            .invoice-box table tr.item td {
            border-bottom: 1px solid #eee;
            }
            .invoice-box table tr.item.last td {
            border-bottom: none;
            }
            .invoice-box table tr.total td:nth-child(2) {
            border-top: 2px solid #eee;
            font-weight: bold;
            }
            h2, h3 {
            margin: 0;
            }
        </style>
    </head>
    <body>
    <div class="invoice-box">
        <table cellpadding="0" cellspacing="0">
        <!-- Invoice Header -->
        <tr class="top">
            <td colspan="2">
            <table>
                <tr>
                <td class="title">
                    <h2>Global Inc</h2>
                </td>
                <td>
                    Invoice #: 12345<br>
                    Created: January 1, 2025<br>
                    Due: January 31, 2025
                </td>
                </tr>
            </table>
            </td>
        </tr>
        <!-- Company & Customer Information -->
        <tr class="information">
            <td colspan="2">
            <table>
                <tr>
                <!-- Specify the inputs from the datasource -->
                <td>
                    ${firstName || ''}<br>
                    ${customerCompany || ''}<br>
                    ${address || ''}<br>
                </td>
                <td>
                    Global Inc<br>
                    67890 First Avenue,<br>
                    New York,<br>
                    34567
                </td>
                </tr>
            </table>
            </td>
        </tr>
        <!-- Remaining HTML content -->
        <!-- Payment Method Details -->
            <tr class="heading">
                <td>Payment Method</td>
                <td>Check #</td>
            </tr>
            <tr class="details">
                <td>Check</td>
                <td>1001</td>
            </tr>
            <!-- Itemized List of Services/Products -->
            <tr class="heading">
                <td>Item</td>
                <td>Price</td>
            </tr>
            <tr class="item">
                <td>Website Design</td>
                <td>$300.00</td>
            </tr>
            <tr class="item">
                <td>Hosting (3 months)</td>
                <td>$75.00</td>
            </tr>
            <tr class="item last">
                <td>Domain Registration (1 year)</td>
                <td>$10.00</td>
            </tr>
            <!-- Total -->
            <tr class="total">
                <td></td>
                <td>Total: $385.00</td>
            </tr>
            </table>
        </table>
    </div>
    </body>
    </html>
`;

}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.jigx.com/examples/readme/actions/generate-pdf.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.