Salesforce Developer Tutorial (LWC): How to Generate a PDF from a Lightning Web Component

[@CodingWithTheForce]

I meant to do this in the video and forgot it. I want to give a HUGE shoutout to Moonvvell on the Salesforce StackExchange for finding and commenting the answer to the problem of leveraging jsPDF in LWC's. I had done this in Aura multiple times without problems but I was missing something with the LWC variety and thanks to his solution this was easy as can be to create for you! Thank you Moonvvell and to everyone else who constantly contributes to the SF StackExchange. You make all our lives 1000x easier! salesforce.stackexchange.com/questions/298638/jspdf-importing-but-not-working-in-lwc

[@aradhikachawla6284]

Very helpful article. Thanks for demonstrating so well. It is working like a charm. finally we can create pdf generator with Lwc. Jspdf is a very powerful library.

[@aradhikachawla6284]

We will need to setup the CORS setting in the Salesforce - usually it is there but in a new org this types of missing settings will block jspdf file to not load consistantly

[@Shams-ox5nl]

Very helpful video to generate PDF, Keep doing good work thanks.

[@ekron8601]

Awesome, I'm going to try it, beacuse I don't want to create a visual force and besides learning some new, thanks so much :D :D

[@nickd7919]

Thanks, this tutorial is excellent, what advantages do you see in making the pdf with LWC instead of a visualforce page ?

[@Lapio.]

Hi! @CodingWithTheForce Thanks for this video! I have a question, How can i use with fields related? Because I tried and doent's work. Thanks!

[@santoshreddy003]

Thank you Matt! I am getting the error Cannot read property of '0' of undefined when clicking on the button. I have used same class, LWC and resource which is present in the repo that u have shared for printing the contacts. Can you please let me know a way to fix. Edit : I was able to identify the cause for the issue. Salesforce is blocking jsPdf as it is not locker compliant.But strangely, the export works for the very first time. But after that Salesforce is blocking it. Hence, I had to switch to traditional VF render as PDF approach. Anyways, thanks for sharing the information Matt :)

[@bobbypepetrueno3431]

Hi Santosh, how did you solve the problem: Cannot read properties of undefined (reading '0') ?

[@dastanaibek7351]

Hello, thanks for your video. How to show field labels instead of API names in PDF?

[@gkcd83]

great video MATT!!! i'm trying to do the same , but the whole page (where you set the button) rendered, but with queryselectorall() but its doesn't work, do you know how to do that? you are genius you explained everything !!

[@Evildragonfirez]

I love your content. QQ though, does this version of pdfJS come with the "Viewer"? I'm needing to render a pdf from a blob on a component as a "document preview". I tried uploading the traditional library with the viewer but the zip is over 5mb lol.

[@milanoleo]

Hey, i have the same issue :D Did you find a solution for it?

[@accursiomaniscalco9865]

Hi, I have followed your tutorial and I find it very interesting :) I would like to ask you if you can pass an argument to the query present in the PdfGenerator class in order to print a list of lines that satisfy that argument. How is the argument passed from the lwc component to the class? Thanks in advance :)

[@meric7010]

Hey Matt, is it possible to take a graph i created using ChartJS and feed it to jsPDF to get the output? My client needs this done, do you have any tips or words that could guide me? Currently Im using chatGPT to find a way to do this, could really use your input.

[@ramiroandresalvarez5632]

This is great! :)

[@KevinToftegaard]

This is way above my skill level but i like to watch your videos and learn. I have one basic question. You use a program to make the thing. Would I be able to make it only in Salesforce?

[@CodingWithTheForce]

I believe they have open sourced lightning web components. You could theoretically be the same thing on another platform using their open source library for sure. It would be a bit different from this video, but relatively similar. github.com/salesforce/lwc

[@jaiaswani8039]

Can we use any library such as stripe js or any other library just like you used jsPDF library.

[@dimitrigiannakos6247]

hi I have a question, how can i do this for one Account?

[@UnclutchedSprints]

Hi, Can I take a PDF from Visualforce or ConentDocument and render using the JS library?? If possible please let me know.. will be very helpful.

[@bidishamukherji]

Can you please mention how to add custom font to be rendered in pdf

[@karoo686]

Hey Matt, Thank you for this tutorial. I am running into the same issue as Seemesh Patel below. I get the error [Cannot destructure property 'jsPDF' of 'window.jspdf' as it is undefined.]. I've tried using the ES, node and UMD versions of jspdf and always get the same error. Any help would be greatly appreciated.

[@josedejesusricardosantos2921]

It's too good man ur great !! Do you know how to create PDF's from html content?

[@nickstoliker8707]

Can you CTRL + on the VSCode window, when on my phone I struggle to see your content. Also, great videos and topics!

[@CodingWithTheForce]

Hey man, yea I can do that for sure! I'll start zooming in a bit more in my future videos! Thanks for letting me know!

[@chinq6t]

Hi - is it possible to generate a PDF that is essentially a screenshot of an LWC? The objective is to target and capture an LWC's HTML instead of the whole page (e.g. window.print)

[@MAMADOUFALL-c6e]

Hey Matt when i fetch number fields from apex controller jspdf doesn't display them in generated pdf

[@rumitrockstar4904]

In video(s), if possible, zoom in the code editor a bit(make the fonts bigger). Overall, it is one of the best video I have found recently on LWC, thank you so much :)

[@CodingWithTheForce]

Yes absolutely! I'm trying to get into the habit of zooming in when coding. In my new video series that I'm going to be releasing soon I have tried hard to make sure I do that.

[@BCE_OXYEHHO]

Hey Matt, any plans to take it to the next level and make it work with Email HTML templates? I see it has support for HTML, but having hard time getting the dependent library imported and getting it to work. Error: Could not load dompurify

[@Mantisentil00]

getting the same error when trying to build a pdf from HTML, 'Could not load dompurify'. Any known solutions to this?

[@chrisburns1733]

Is there a way to open the PDF in a new tab and allow users to download the PDF contents using the SFDC mobile app?

[@nitishyadav554]

Hey ! I landed on this tutorial and downloaded the latest min js file from the repository. I run into an error when loading the latest min file in my LWC but using the min file from your download URL loads perfectly fine. What could be going wrong ? Edit : I was not loading the umd.min file. Using the umd file worked. What could be different between the two ?

[@aradhikachawla6284]

I am having issues in getting data from Salesforce record. It is in a rich text field has HTML code. I don't want to loose its formatting , any idea how can I convert it to plain text with keeping formatting? I used stripHtmltags with replaceAll but still some time text is not aligning perfectly and also also all bullets are gone. any suggestion Matt ?

[@anoopgalla7618]

It's too good man ur great 👍

[@rammohanreddykasu9667]

Hi, I have a blob content from Apex class, can I pass it to Js file and can still generate PDF?

[@worldofsandeep3958]

hey matt, everything is working for me except the doc.table line, how to resolve it??

[@aradhikachawla8467]

Hi Matt, When I am doing doc.save() function downloads the pdf with correct image but doc.output() does not save the image its coming distorted? any suggestions ? Anyone else facing this problem , please suggest and solution. I have to send this pdf to salesforce where I can attach as attachment. File is getting there but the image is not displaying correctly.

[@aradhikachawla6284]

Got the solution - send the doc.output('datauristring') and capture in Salesforce with att.Body = Encodingutil.base64Decode(doc.substring(doc.indexOf(',') + 1));

[@alexiwalter4024]

Thank you for your videos. Is it possible to run this in an app on iOS ? Or do somebody know how to generate a pdf as attachment on iOS Salesforce app ?

[@durbachakraborty7131]

pdf is not generating if any of the dara from the list is missing the value mentioned in headers .. for example if header is x and y and in one of the data x value is not coming or blank pdf is not generating for any of the data in list

[@tilottamadeore1541]

I am not able to get data in the table only headers are populating in pdf. Any suggestions?

[@fredkampf]

Thank you so much for this! Is there a guide that instructs how to add lines, different spacings, etc? thanks again!!

[@CodingWithTheForce]

Yea for sure! Hopefully these help! There's example implementations here: raw.githack.com/MrRio/jsPDF/master/ The repo is here and it explains some stuff: github.com/MrRio/jsPDF The site dedicated to documentation is here: raw.githack.com/MrRio/jsPDF/master/docs/

[@fredkampf]

@@CodingWithTheForce Thank you! When trying to create a table, I am getting [Cannot read property '0' of undefined] error. thanks again for this, it great!!!

[@ekron8601]

the property window.jspdf==undefined , Why? some help please

[@thorreloadedgaming]

I tried the same approach shown in the video, but its not working for me. I have exactly same code. Still not working.

[@grayst3499]

You can't tell me, it's possible to take a screenshot of the lwc component and output it to pdf??

[@accursiomaniscalco9865]

It si possible to Generate a PDF from a Lightning Aura Component?

[@GAMINGIN-lo6eg]

Everything is fine,The headers are showing but the values below the table is empty.Can someone find me a solution.

[@seemeshpatel7840]

Hi, I have tried same way but getting below error [Cannot destructure property 'jsPDF' of 'window.jspdf' as it is undefined.]

[@ekron8601]

I got the same problem, did yoy fix it??

[@rogmiksits290]

I tried everything you said . I have this exact requirement to implement . When I see this video I felt like . god sent . But some what I am getting this error [Cannot read property '0' of undefined] , function- Object.t.cell, line-187, column-3246. Can you help me figure that out please?

[@CodingWithTheForce]

It happens when the ids of your table headers are not the same as the field api names of your table rows. It’s one of the errors I actually have run into a bunch of times and messed up in this video, lol. I think I briefly discuss it near the end.

[@venkateshi3400]

HI did u slove it ??

[@bobbypepetrueno3431]

@@CodingWithTheForce Thank u so much!

[@Emergencymail-k1p]

@@CodingWithTheForce Hi, what if I don't want the api names to be the table header rows and want the field labels to be the header rows. Ex: Api Name: SBQQ__NetPrice__c and Field Name: Net Unit Price. So how do I use the field names as the table header? Please do the needful any help would be much appreciated.

[@qwalinights6069]

Is it possible to send this Pdf as an email attachment? Please do let me know if someone has done this...

[@pfe-rz7zw]

what is the password ?

[@thescholarshub1116]

Bro need your help to generate proposal pdf from quote page please help

[@si6tynin]

It would be great to start your videos with some kind of loud out mental diagram or designing the solution first.Thanks for these use cases.

[@CodingWithTheForce]

Hey Chetan, thanks for the idea, I might give that a shot soon. I have considered it in the past for sure.

[@sarveshreddy936]

hi iam getting this error can you please help me to solve it ? Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0') at t.cell (jspdf:117:4427) at t.table (jspdf:117:6964) at f.generatePdf (generatePDF.js:1:813) at eval (generatePDF.js:1:953)

[@spaghettigotnochill2675]

facing exactly the same issue did you find the solution?

[@manideepmanchi]

Issue was resolved here??

[@jokerddlv]

Maybe you've already answered this before: Why not using VSCode?

[@CodingWithTheForce]

It’s primarily because the auto-complete feature is so much better in IntelliJ/IlluminatedCloud2. IlluminatedCloud2 also just has a ton more features that make development easier. I also prefer IntelliJ’s local Git comparison tool among a handful of other things. VSCode is great but IntelliJ and IlluminatedCloud2 are still way better.

[@kevelopers]

Crack

[@StracheyWade-i4v]

Williams Jennifer Walker Larry Harris Eric

[@stevenduong8126]

Dear Sir, jspdf:187 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0') at Object.t.cell (jspdf:187) at Object.t.table (jspdf:187) at u.generatePdf (warrantySoService.js:4) at eval (warrantySoService.js:4) I have this bugs when deploy to the Org. Please advise. I copied all your code the same but still have the error. Please asdvise. Thanks.

[@beyondthescreen1143]

same

[@spaghettigotnochill2675]

exact same problem did you find any solution?