Automatically Generate PDFs from Firestore Documents with PDFPlum Firebase Extension

Published in

Firebase Developers

3 min readOct 30, 2023

In this guide, we’ll demonstrate how to set up the PDFPlum Firebase Extension, specifically the Firestore version, to automatically generate PDF documents whenever a new document is created or updated in a specified Firestore collection. By installing PDFPlum extension, you can streamline the PDF generation process, creating dynamic PDFs based on your Firestore data with minimal manual intervention.

Prerequisites:

A Firebase project set up and configured.
Basic knowledge of Firebase operations.

Step 1: Install and Configure PDFPlum Firebase Extension

https://extensions.dev/extensions/pdfplum/firestore-pdf-generator

Go to the PDFPlum Firestore Extension page on extensions.dev.
Click on the “Install in Firebase console” button.
You’ll be redirected to the Firebase Console. Select the Firebase project you want to use with PDFPlum.
Follow the on-screen instructions to configure the extension. During this phase, set the value for the TEMPLATE_PATH extension parameter:

TEMPLATE_PATH: The full path of your template.zip file in Firebase Cloud Storage, including the bucket name (e.g., gs://your-bucket/template.zip).

For a complete list of parameters you can set for the extension, refer to the PDFPlum documentation.

Step 2: Prepare Your HTML Template Using Handlebars

PDFPlum utilizes Handlebars, a simple templating engine, to allow for dynamic content in your HTML templates. Here’s a simple example of an HTML template with Handlebars expressions:

<!DOCTYPE html>
<html>
<head>
    <title>Invoice</title>
</head>
<body>
    <h1>Invoice for {{customerName}}</h1>
    <p>Date: {{date}}</p>
    <table>
        <thead>
            <tr>
                <th>Item</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            {{#each items}}
                <tr>
                    <td>{{this.name}}</td>
                    <td>{{this.price}}</td>
                </tr>
            {{/each}}
        </tbody>
    </table>
    <p>Total: {{total}}</p>
</body>
</html>

Step 3: Package Your HTML Template and Resources

Package your HTML template and any other resources such as CSS and images into a ZIP file.
Name the ZIP file as template.zip.

Step 4: Upload Your Template to Google Cloud Storage

Navigate to the Google Cloud Storage section in your Firebase project.
Create a new bucket or use an existing one.
Upload the template.zip file to the bucket.

Step 5: Trigger PDF Generation

Trigger PDF generation by creating a new document in the Firestore collection you specified during the extension installation. This action initiates the PDFPlum extension to process the HTML template, fill in dynamic values, and generate a PDF document.

Here’s an example of a simple Firestore document to trigger PDF generation:

{
    "customerName": "John Doe",
    "date": "2021-12-01",
    "items": [
        {"name": "Item 1", "price": "$10.00"},
        {"name": "Item 2", "price": "$15.00"}
    ],
    "total": "$25.00"
}

Note: You have the option to further customize the PDF generation process by specifying embedded parameters within the Firestore document that triggers the PDF generation. Here’s an example:

{
    "customerName": "John Doe",
    "date": "2021-12-01",
    "items": [
        {"name": "Item 1", "price": "$10.00"},
        {"name": "Item 2", "price": "$15.00"}
    ],
    "total": "$25.00",
    "_pdfplum_config": {
        "outputStorageBucket": "custom-output-bucket.appspot.com",
        "outputFileName": "invoice.pdf",
        "adjustHeightToFit": true,
        "chromiumPdfOptions": {
            "format": "A4",
            "printBackground": true
        }
    }
}

For a complete list of parameters you can set as embedded parameters, refer to the PDFPlum documentation.

Step 6: Retrieve Your PDF (Optional)

Once PDFPlum has generated your PDF, it will be stored in the Google Cloud Storage bucket specified in the OUTPUT_STORAGE_BUCKET extension parameter (which can be set via embedded parameters in Firestore document). Navigate to this bucket in your Firebase project to download your PDF.

Conclusion

With the PDFPlum Firebase Extension configured for Firestore, you now have an automated system in place to generate PDFs from your Firestore documents. Explore the various customization options to tailor the PDF generation process to your needs, and enjoy a seamless, automated PDF generation experience!