Skip to main content

​
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

​
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 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.

​
Important: Accurate CSS styles for printing

It’s recommend to apply the following styles to the html file that contains the JoyDocExporter. This ensures proper css styles and color rendering when generating a PDF using the headless browser. 
<style>
  html {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  body {
    margin: 0px;
  }
</style>

​
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.