PDF / Image Generation CustomJS

Introduction

With CustomJS, you can set up automated actions to generate, merge, or watermark images or PDFs and integrate them with various platforms. In this article, we'll explore how to use CustomJS to accomplish these tasks with Salesforce, Airtable, Google Spreadsheet, and Asana, by executing the CustomJS function via links or webhooks. All code examples can also be found as templates when creating a function.

Why CustomJS?

CustomJS is a flexible solution that allows you to run JavaScript to create custom image and PDF automations and integrations. One of the powerful features of CustomJS is its ability to generate, merge, or watermark images and PDFs using dynamic values from different data sources. These actions can be triggered manually by team members, providing flexibility and control over the process.

How it works

Below you can see some code examples. Please also make sure that you adjust the repsonse type of your function accordingly.

PDF Helper

We have a helper function with which you can convert HTML to PDF.

Generate With Static Content

const { HTML2PDF } = require("./utils");

return await HTML2PDF('<h1>Hello World</h1>');

Fetch HTML Content

You can simply use axios to download HTML content from the internet and convert it to PDF.

const { HTML2PDF } = require("./utils");
const axios = require("axios");

const res = await axios.get('https://google.de');

return await HTML2PDF(res.data);

Image Generation

In this example you can see how to generate a Chart.js diagram as a png image. You can find the corresponding Chart.js HTML code if you create a new function and select this template "Generation and return of a png image with a chart rendered by Chart.js"

const { HTML2PNG } = require("./utils");
const nunjucks = require("nunjucks");

const html = nunjucks.renderString(variables.HTML, {
  data: input.data,
  labels: input.labels.split(',').map(s => `"${s.trim()}"`)
});

return HTML2PNG(html);

Template Engine Helper

We use HTML templates that are enriched with dynamic content by using the Nunjucks Template Engine. The CustomJS helper is then used to convert the HTML string into a PDF.

const { HTML2PDF } = require("./utils");
const nunjucks = require("nunjucks");

const content = nunjucks.renderString(variables["HTML Template"], {
  invoiceNumber: input.invoiceNumber,
});

return await HTML2PDF(content);

PDF Merge / Watermark

We are still working on examples of how you can append 2 PDF documents together or watermark them. If you are interested just write us.

Other Examples

Invoice PDF Generation With CustomJS
Native Make PDF V1 Module