Effortless PDF Generation in Salesforce Lightning: Mastering JsPdf
ByKomal Jha
Almost all of us started using LWC instead of Aura or Visualforce and became familiar with the delicateness of the Lightning components framework as we dived into the development of Lightning components. However, there are multiple occasions where we need to come back to either Aura or Visualforce. Being a new and JavaScript-intensive framework, it has limited room for some features.
In this blog, we will discuss one of such features - generating PDF from LWC.
Use Cases
We recently had a requirement to create a functionality that would allow us to export PDFs from LWC components.
Solution Approach
The primary difficulties with this use case are
- Although It was possible to download the PDF via couple different methods, the terms "Security with Lightning Locker" limit the alternatives available in LWC.
- When working within the Salesforce environment, adhering to security best practices is non-negotiable. Passing raw HTML strings directly into components poses a risk to Salesforce security policies, making it imperative to explore secure alternatives. This is where the journey to find a robust solution for PDF export begins.
The strategy used is as follows
jsPdf Overview:
- JavaScript library for client-side PDF generation.
- Enables dynamic creation, modification, and enhancement of PDF documents using JavaScript.
Autotable Plugin Advantages:
- Enhances design further with Autotable plugins.
- Streamlines table creation and formatting in PDFs.
Comprehensive Solution:
- Combining jsPdf with Autotable provides a powerful solution.
- Achieves both dynamic PDF generation and advanced table design seamlessly.
To demonstrate the use of the jsPdf library and Autotable plugins, let's construct a small example:
JSPDF JavaScript (jspdf.umd.min.js) file must first be added to our static resource
Use this link to download the file:
Use the following code in the LWC Component after adding to the static resource
- First import Static Resource and platformResourceLoader like below
- Next, use the loadscript method as shown below to load the script
Image Rendering and Data Dependencies
Assuming that the PDF contains any requirements for picture rendering from other components, ensure that the entire method operates asynchronously. Additionally, create an async function if you need to depend on any data before creating a PDF.
Playground for jsPdf
https://raw.githack.com/MrRio/jsPDF/master/index.html
Design Options
- theme: 'striped'|'grid'|'plain' = 'striped'
- styles: StyleOptions
- headerStyles: StyleOptions
- bodyStyles: StyleOptions
- footStyles: StyleOptions
- alternateRowStyles: StyleOptions
- columnStyles: {&columnDataKey: StyleOptions} Please note that the columnDataSelector is usually the index of the column but may alternatively be the dataKey of a column if initialized with the columns property.
Like CSS, styles can be overridden by more specialised styles. Priority order
- styles
- headStyles, bodyStyles and footStyles
- alternateRowStyles
- columnStyles
Other Options
- startY: 10 / startY: doc.lastAutoTable.finalY (static / table start from the next to the last table)
- Margin: 10 / {top: 10, right: 10, bottom: 10, left: 10}
- pageBreak: 'auto'|'avoid'|'always' . If ‘avoid’, the plugin will only divide a table into numerous pages in the event that the height of the table exceeds the height of the page.
- rowPageBreak: 'auto'|'avoid' = 'auto' , plugin will only divide a row into numerous pages in the event that the height of the row exceeds the height of the page.
- tableWidth: 'auto'|'wrap'|number = 'auto'
- showHead: 'everyPage'|'firstPage'|'never' = 'everyPage'
- showFoot: 'everyPage'|'lastPage'|'never' = 'everyPage''
- tableLineWidth: number = 0
- tableLineColor: Color = Number
- horizontalPageBreak = true / false, tables that are larger than the width of the page are divided into multiple pages.
- horizontalPageBreakRepeat: string / number that, on split pages where horizontalPageBreak = true, is used to repeat a column.
Hooks
Hooks that are called in different sequences while the table is being drawn. The hook function receives information about the current cell, row, or column.
-
didParseCell: (data) => { } It is used to override content and styles for a specific cell. it could be called only when it finished parsing cell content.
-
willDrawCell: (data) => { } It is invoked before a cell and row is drawn. It is used to dynamically change styles (like doc.setTextColor) or to modify text position, among other things, prior to drawing.
-
didDrawCell: (data) => { } It is invoked after a cell has been added to the page. It is used to draw depict extra cell content. such as doc.addImage, additional text like doc.addText or other shapes in jsPdf.
-
willDrawPage: (data) => { } It is invoked before starting to draw on a page. It is used to add headers with page numbers or any such kind of other content that you want on every page.
-
didDrawPage: (data) => { } It is used to add footers with page numbers or any such kind of other content that you want on every page. it could be invoked after the completion of the plugin's page rendering.
An HookData object containing details about the current state of the table and cell is passed to all hooks functions.
Conclusion
In conclusion, leveraging the capabilities of JsPDF and Autotable plugins within Salesforce Lightning Web Components empowers developers to seamlessly generate PDF documents. By integrating these libraries, users can effortlessly create professional-looking PDFs directly from their Salesforce environment. This powerful combination allows for dynamic content creation, including titles, tables, and various formatting options, providing a versatile solution for generating customized PDF reports and documents within the Salesforce platform.
The step-by-step guide presented in this blog demonstrates the straightforward implementation of JsPDF and Autotable functionalities, offering a starting point for developers to delve deeper into PDF generation, tailoring it to their specific use cases. With the flexibility and extensibility of these libraries, the possibilities for enhancing document generation within Salesforce are vast. By harnessing these tools effectively, users can streamline workflows, enhance user experiences, and elevate the quality of generated content within their Salesforce applications.
Create your own stunning PDFs now!