Overview

Joyfill Export SDK along with a headless browser can be used to generate PDF files. These PDF files can be stored directly in your own system, S3, or any other file storage.

The Joyfill Export SDK can be used on page in your React, Angular, Vue, or VanillaJS web applications to render Joyfill Forms. Once you have the Forms rendering in your web application you can use a headless browser to convert that web page into a PDF file.

1. Install

Using a package manager

npm install --save @joyfill/components

yarn add @joyfill/components

Using a CDN

https://cdn.jsdelivr.net/npm/@joyfill/components@latest/dist/joyfill.min.js

2. Usage

Add Joyfill PDF SDK to your web application

You will use the JoyDocExporter to render a PDF ready form on a web page. The JoyDocExporter receives one argument, doc, that you pass the Joyfill Supported JSON data. This will render a form that is ready to be used for a PDF file. See examples below for VanillaJS and React examples.

import React, { useState, useEffect } from 'react';
import { retrieveTemplate } from './api.js';
import { JoyDocExporter } from '@joyfill/components';

function PDFPage() {
  
  const data = {...} //Your Internal Joyfill JSON Data 
                
  return (
    <JoyDocExporter doc={data}/>
  );
}

export default PDFPage;

/**
 * ❗️Important Note: ensure you use the full import path if you're using VanillaJS modules and 
 * not the CDN. Full path `import Joyfill from '@joyfill/components/dist/joyfill.min.js'
 */

import Joyfill from "@joyfill/components/dist/joyfill.min.js";

const initJoyfill = async () => {

  const data = {...} //Your Internal Joyfill JSON Data 

  Joyfill.JoyDocExporter(
    document.getElementById('joyfill'),
    {
      doc: data
    }
  );

}

initJoyfill();

Important Note: Ensure that no margin, padding, or other external spacing styles are targeting the body or any other parent elements that contain JoyDocExporter. We target measurements and sizing to support standard PDF Letter dimensions. Any additional spacing could impact the sizing and cause fields to get cut off.

Setup headless browser to generate PDF

Once you have Joyfill PDF SDK rendering forms to a web page you can use a headless browser to capture that web page and generate a PDF. If you're interested by we used web technology see the section below.

We recommend the Browserless getting started guides. They provide some of the best guides and resources out there on how to use headless browsers in your own projects. Notice: Joyfill is not associated with browserless in any way.

3. Try it yourself

If you’re looking for a full example project that shows how you can generate PDF files then head over to our full example project and try it for yourself.

Why Joyfill use’s JS, HTML, and CSS to generate PDFs?

Joyfill uses web technology, instead of the old ISO 32000 PDF Standard, because we wanted the generated PDF file to look exactly as you and your users expect. The generated PDF file will look just like your form does. We were able to achieve that one for one match by building on the latest web technology.

Joyfill strives to innovate past was previously possible with the old ISO 32000 PDF standard. We are on a mission to build the most powerful forms ever. We will always utilize the best possible option available to us in order to achieve that goal.