Generate PDFs in Salesforce with Lightning Web Components and jsPDF

This tutorial shows you how to create a Lightning web component that uses the jsPDF(opens in a new tab) library to generate PDF documents in Salesforce. You’ll also learn the limitations of client-side PDF generation and when to consider alternatives.

Prerequisites

• A Salesforce developer account(opens in a new tab)
• Visual Studio Code(opens in a new tab) installed on your computer
• The Salesforce command-line interface (CLI)(opens in a new tab)

Document Solutions for Salesforce

Document Solutions for Salesforce is Nutrient’s low-code platform for document workflows. It’s 100 percent native to Salesforce (built with LWC and Apex) and includes:

• Template creation with merge fields, conditions, and loops
• One-click document generation from any record
• WYSIWYG editing with PDF and DOCX export
• Legally binding eSignatures with audit trails
• Salesforce Flow integration for automation

With Document Solutions for Salesforce, data never leaves your organization. Start a free trial or contact Sales.

Step 1 — Setting up your development environment

1. Open Visual Studio Code on your computer.
2. Log in to your Salesforce developer account by pressing Control-Shift-P (on Windows) or Command-Shift-P (on macOS). Then, select SFDX: Authorize an Org > Project Default and press Enter. This action will redirect you to log in to your Salesforce organization.

Step 2 — Creating a new Lightning web component

1. In Visual Studio Code, open the Command Palette using Control-Shift-P (on Windows) or Command-Shift-P (on macOS).
2. Type SFDX and select SFDX: Create Lightning Web Component (not SFDX: Create Lightning Component).
3. Enter PdfGenerator as the name of the new component.
4. Press Enter to accept the default path, force-app/main/default/lwc.
5. Press Enter again.

Step 3 — Designing the component

1. Open the pdfGenerator.html file and add the following content:

<template>
  <div>
    <h1>PDF Generator</h1>
    <lightning-button
      label="Generate PDF"
      onclick="{handleGeneratePDF}"
    ></lightning-button>
  </div>
</template>

Step 4 — Including a PDF generation library

Static resources play a crucial role in Salesforce development by allowing you to upload and reference external files, such as JavaScript libraries and stylesheets, within your Salesforce organization. Since Lightning web components operate within a secure context and have limitations on how external resources are loaded, using static resources is the recommended approach to bring in third-party libraries.

To generate a PDF, you’ll need a PDF generation library. One popular choice is jsPDF(opens in a new tab). Create a static resource in Salesforce to hold the jsPDF library.

1. Log in to your Salesforce developer account.
2. Click App Launcher (grid icon) and search for Static Resources.
3. Click Static Resources to access the Static Resources page.
4. Click New.
5. Enter a name for the static resource. Name it something like jsPDFLibrary.
6. Leave the Cache Control field set to Public.
7. Choose the Upload File option and select the jspdf.umd.min.js file(opens in a new tab) in the node_modules/jspdf/dist folder. This is the jsPDF library you want to upload. Double-check that the name of the static resource you uploaded is exactly jspdf.umd.min.js, as the name is case-sensitive.
8. Click Save.

Step 5 — Implementing PDF generation logic

Open the pdfGenerator.js file and replace its contents with the following code. This loads the jsPDF library as a static resource and implements the PDF generation logic:

import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import JS_PDF from '@salesforce/resourceUrl/jsPDFLibrary';

export default class PdfGenerator extends LightningElement {
  jsPDFInitialized = false;

  renderedCallback() {
    if (!this.jsPDFInitialized) {
      this.jsPDFInitialized = true;
      loadScript(this, JS_PDF)
        .then(() => {
          console.log('jsPDF library loaded successfully');
        })
        .catch((error) => {
          console.error('Error loading jsPDF library', error);
        });
    }
  }

  handleGeneratePDF() {
    if (this.jsPDFInitialized) {
      // Make sure to correctly reference the loaded jsPDF library.
      const doc = new window.jspdf.jsPDF();

      // Add content to the PDF.
      doc.text('Hello PDF!', 10, 10);

      // Save the PDF.
      doc.save('generated_pdf.pdf');
    } else {
      console.error('jsPDF library not initialized');
    }
  }
}

Next, open the pdfGenerator.js-meta.xml file and replace its contents with the following configuration to expose the component on Lightning pages:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
      </targets>
</LightningComponentBundle>

Step 6 — Pushing changes to your organization

1. Press Control-Shift-P (on Windows) or Command-Shift-P (on macOS) to open the Command Palette.
2. Type SFDX and select SFDX: Deploy This Source to Org.

Step 7 — Verify the component in your organization

1. Open your Salesforce organization.
2. Click App Launcher (grid icon) and search for Sales.
3. Click the setup gear icon, and then select Edit Page.
4. Drag the pdfGenerator component from the custom section to the page.
5. Save the page.
6. Click Generate PDF to create a PDF document.

Once testing is complete, deploy your Lightning web component to production and customize it for your Salesforce application.

Limitations of PDF generation using jsPDF and LWC

1. Client-side processing — jsPDF generates PDFs on the client side, which could impact performance for complex or large PDFs.
2. Styling and layout — jsPDF is suited for basic PDFs; complex styling and layouts might require additional effort.
3. Advanced features — Advanced elements like complex tables, interactive forms, or intricate charts may require extra handling.

Conclusion

You now have a working Lightning web component that generates PDFs using jsPDF. This approach works for simple documents but struggles with complex layouts, large files, and advanced features like forms.

For production use, consider Document Solutions for Salesforce or server-side PDF generation. Start a free trial or contact Sales.

FAQ