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
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.
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
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.
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.
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
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 ?
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 :)
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)
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.
Got the solution - send the doc.output('datauristring') and capture in Salesforce with att.Body = Encodingutil.base64Decode(doc.substring(doc.indexOf(',') + 1));
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.
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 !!
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 ?
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.
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 :)
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?
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
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
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?
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.
@@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.
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)
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 ?
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/
@@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!!!
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.
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 :)
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.
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
Thanks, this tutorial is excellent, what advantages do you see in making the pdf with LWC instead of a visualforce page ?
Very helpful video to generate PDF, Keep doing good work
thanks.
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.
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
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
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!
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.
Hey, i have the same issue :D Did you find a solution for it?
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.
hi
I have a question, how can i do this for one Account?
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.
Hey Matt when i fetch number fields from apex controller jspdf doesn't display them in generated pdf
Can we use any library such as stripe js or any other library just like you used jsPDF library.
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
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 ?
I tried the same approach shown in the video, but its not working for me. I have exactly same code. Still not working.
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 :)
Hi Santosh, how did you solve the problem:
Cannot read properties of undefined (reading '0')
?
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)
I am not able to get data in the table only headers are populating in pdf. Any suggestions?
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.
Got the solution - send the doc.output('datauristring') and capture in Salesforce with att.Body = Encodingutil.base64Decode(doc.substring(doc.indexOf(',') + 1));
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?
hey matt, everything is working for me except the doc.table line, how to resolve it??
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.
same
exact same problem did you find any solution?
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 !!
Hi, I have a blob content from Apex class, can I pass it to Js file and can still generate PDF?
Hello, thanks for your video. How to show field labels instead of API names in PDF?
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 ?
the property window.jspdf==undefined , Why? some help please
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.
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 :)
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?
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
Everything is fine,The headers are showing but the values below the table is empty.Can someone find me a solution.
You can't tell me, it's possible to take a screenshot of the lwc component and output it to pdf??
It's too good man ur great !!
Do you know how to create PDF's from html content?
Hi, I have tried same way but getting below error
[Cannot destructure property 'jsPDF' of 'window.jspdf' as it is undefined.]
I got the same problem, did yoy fix it??
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
getting the same error when trying to build a pdf from HTML, 'Could not load dompurify'. Any known solutions to this?
Can you CTRL + on the VSCode window, when on my phone I struggle to see your content. Also, great videos and topics!
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!
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?
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.
HI did u slove it ??
@@CodingWithTheForce Thank u so much!
@@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.
It si possible to Generate a PDF from a Lightning Aura Component?
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)
facing exactly the same issue did you find the solution?
Issue was resolved here??
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 ?
This is great! :)
Is it possible to send this Pdf as an email attachment? Please do let me know if someone has done this...
Thank you so much for this! Is there a guide that instructs how to add lines, different spacings, etc? thanks again!!
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/
@@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!!!
what is the password ?
It's too good man ur great 👍
Bro need your help to generate proposal pdf from quote page please help
Maybe you've already answered this before: Why not using VSCode?
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.
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.
Hey Chetan, thanks for the idea, I might give that a shot soon. I have considered it in the past for sure.
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 :)
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.
Williams Jennifer Walker Larry Harris Eric
Crack