How to Automate PDF Document Creation with an HTML Renderer

Automating document creation is a crucial feature for many SaaS products, whether to generate invoices, reports, or certificates. Using an HTML renderer, developers can convert dynamic HTML content into high-quality PDF documents or PNG images with just a few lines of code. In this guide, we will show you how to integrate ExoAPI's document creation capabilities into your SaaS product, saving time and effort.

Why Automate Document Generation?

Automating document creation allows businesses to:

• Generate consistent, professional-looking documents at scale.
• Save time by automating repetitive tasks like invoicing or report generation.
• Improve accuracy by removing manual document creation, reducing the risk of errors.
• Offer customers customized documents based on dynamic data (e.g., personalized reports).

Use Cases for Automated Document Generation

Here are a few practical examples where document automation capabilities can simplify your SaaS product workflows:

• Invoicing Systems: Automatically generate PDFs of customer invoices based on order details. Example: After a customer places an order, dynamically generate a branded invoice PDF and email it to them.
• Reporting Dashboards: Allow users to download reports as PDFs. Example: A SaaS product offering analytics can let users export their data as professional-looking PDF reports.
• Certificates and Badges: Create downloadable PNG certificates or badges for course completions, events, or achievements. Example: An e-learning platform could automatically generate customized certificates for students upon completing a course.
• Order Summaries for E-commerce: Automatically generate order confirmations or shipping labels in PDF or PNG formats. Example: After an order is placed, generate a shipping label as a PDF, ready for print.

Let's walk through how to set up automatic document generation using ExoAPI's HTML Renderer.

Prerequisite: Sign Up for ExoAPI

Visit ExoAPI and sign up for an account to obtain your API key.

1. Install the SDK:

npm install @flower-digital/exoapi-sdk

2. Create an Instance of ExoAPI:

In your JavaScript or Node.js application, initialize the ExoAPI with your API key:

import { ExoAPI } from "@flower-digital/exoapi-sdk";
const exoapi = new ExoAPI({ apiKey: YOUR_API_KEY });

Basic PDF Generation Example

Now, let's look at a simple example of generating a PDF from HTML content. The following code snippet shows how to create a PDF document with basic styling:

import { ExoAPI } from "@flower-digital/exoapi-sdk";
import fs from "fs";

const exoapi = new ExoAPI({ apiKey: YOUR_API_KEY });

async function htmlRenderer() {
  try {
    const res = await exoapi.htmlRenderer({
      html: '<p style="padding:8px;font-size:36px">Hello <b style="color: green">world!</b></p>',
      format: "pdf",
    });
    fs.writeFileSync("document.pdf", Buffer.from(await res.arrayBuffer()));
    console.log("PDF document generated successfully!");
  } catch (err) {
    console.error("Error generating PDF:", err);
  }
}

htmlRenderer();

How It Works:

• The htmlRenderer() function sends an HTML string to ExoAPI, which processes it and returns a PDF document.
• We save the PDF locally using Node.js's fs module, writing the file as document.pdf.
• You can replace the HTML string with dynamic content or templates based on your application's requirements (e.g., customer details, order summaries).

Advanced PDF Customization

ExoAPI offers a variety of options to customize your PDFs. You can control the page size, margins, orientation, headers, footers, and even inject custom CSS for precise styling.

Here's an advanced example showing how to customize the PDF output:

async function generateAdvancedPDF() {
  try {
    const res = await exoapi.htmlRenderer({
      html: '<p style="font-size:36px">Hello <b>world!</b></p>',
      format: "pdf",
      title: "Sample Document",
      pageSize: "a4",
      margin: "10mm",
      landscape: true,
      css: `
        body {
          font-family: Arial, sans-serif;
          font-size: 14px;
        }
        b {
          color: blue;
        }
      `,
      header: '<div style="background:grey; width:100%; height:30px; font-size:20px">Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>',
      footer: '<div style="background:grey; width:100%; height:30px; font-size:20px">Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>',
    });
    fs.writeFileSync("advanced-document.pdf", Buffer.from(await res.arrayBuffer()));
    console.log("Custom PDF document generated successfully!");
  } catch (err) {
    console.error("Error generating custom PDF:", err);
  }
}

generateAdvancedPDF();

Key Parameters:

• title: The title of the PDF document, which will appear in the metadata.
• pageSize: Defines the size of the PDF (e.g., A4, Letter, etc.). You can also set explicit dimensions using pageWidth and pageHeight.
• margin: Sets uniform margins for the document, or use marginTop, marginLeft, etc., for more granular control.
• landscape: Set to true for landscape orientation or false for portrait.
• css: Custom CSS can be added to style the document's content.
• header & footer: You can add headers and footers with placeholders for pageNumber, totalPages, and date.

Generating PNG Images

ExoAPI also supports generating PNG images from HTML content. This is useful when you need visual output, such as badges, certificates, or visual reports. Here's an example of how to generate a PNG image:

async function generatePNG() {
  try {
    const res = await exoapi.htmlRenderer({
      html: '<p style="padding:8px;font-size:36px">Hello <b style="color: green">world!</b></p>',
      format: "png",
      imageWidth: 120,
      imageHeight: 120,
    });
    fs.writeFileSync("image.png", Buffer.from(await res.arrayBuffer()));
    console.log("PNG image generated successfully!");
  } catch (err) {
    console.error("Error generating PNG:", err);
  }
}

generatePNG();

Customizing Image Dimensions:

• The imageWidth and imageHeight parameters allow you to specify the size of the PNG image in pixels.
• If imageHeight is not provided, it will automatically adapt to fit the content.

Get Started

ExoAPI's HTML Renderer makes document creation in SaaS products incredibly easy and customizable. With just a few lines of code, you can automate PDF and image generation, streamlining processes such as invoicing, reporting, and creating visually appealing documents. By integrating ExoAPI into your workflow, you can enhance your application's functionality while saving time on manual document creation tasks.

Try out ExoAPI today to see how it can simplify document creation and boost productivity in your SaaS applications. Check out the official ExoAPI documentation to explore more features and customization options.