> ## Documentation Index
> Fetch the complete documentation index at: https://docs.joyfill.io/llms.txt
> Use this file to discover all available pages before exploring further.

# PDF Generation

> Learn how to generate PDF files

# 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

<CodeGroup>
  ```bash bash theme={null}
  npm install --save @joyfill/components
  ```

  ```bash bash theme={null}
  yarn add @joyfill/components
  ```
</CodeGroup>

## Using a CDN

<CodeGroup>
  ```bash bash theme={null}
  https://cdn.jsdelivr.net/npm/@joyfill/components@latest/dist/joyfill.min.js
  ```
</CodeGroup>

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

<CodeGroup>
  ```bash bash theme={null}
  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;
  ```

  ```bash bash theme={null}
  /**
   * ❗️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();
  ```
</CodeGroup>

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

<CodeGroup>
  ```bash bash theme={null}
  <style>
    html {
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
    }
    body {
      margin: 0px;
    }
  </style>
  ```
</CodeGroup>

## 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](https://www.browserless.io/docs/start). 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.

* [Node.js and JS Example](https://github.com/joyfill/examples/tree/main/pdf-export)
* [SDK NPM Package](https://www.npmjs.com/package/@joyfill/components)

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

***