Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sample Code to Generate PDF from Lightning components with in-memory data
public class DataDisplayController {
public String PDFData {get; set;}
public DataDisplayController(){
PDFData = '';
}
public PageReference downloadPDF(){
System.PageReference pageRef = new System.PageReference('/apex/PDFGenerator');
//ensure pdf downloads and is assigned with defined name
pageRef.getHeaders().put('content-disposition', 'attachment; filename=TestPDF.pdf');
return pageRef;
}
}
<aura:component >
<!-- attribute to accept Visualforce page's javascript method -->
<aura:attribute name="sendData" type="object"/>
<!-- Button component to invoke PDF download -->
<lightning:button label="Download Document" onclick="{!c.downloadDocument}" />
</aura:component>
({
downloadDocument : function(component, event, helper){
var sendDataProc = component.get("v.sendData");
var dataToSend = {
"label" : "This is test"
}; //this is data you want to send for PDF generation
//invoke vf page js method
sendDataProc(dataToSend, function(){
//handle callback
});
}
})
<apex:page controller="DataDisplayController" showHeader="false">
<apex:includeLightning />
<!-- Page code -->
<apex:form>
<apex:inputhidden id="hidData" value="{!PDFData}"/>
<apex:actionfunction name="jsGeneratePDF" action="{!downloadPDF}" />
<div id="lightning" />
<script>
function saveData(data, callback){
var hidData = document.getElementById('{!$Component.hidData}');
hidData.value = JSON.stringify(data);
//invoke PDF Generation
jsGeneratePDF();
//invoke callback;
if(typeof callback == 'function') callback();
}
function loadComponents(){
console.log("Loading lightning component: DataProcessor");
$Lightning.use("c:LightningPDFGeneratorDemoApp", function() {
$Lightning.createComponent("c:DataProcessor",
{
sendData : saveData
},
"lightning",
function(cmp) {
// do some stuff
});
});
}
loadComponents();
</script>
</apex:form>
</apex:page>
<aura:application extends="ltng:outApp">
<c:DataProcessor />
</aura:application>
<apex:page controller="DataDisplayController" renderAs="pdf">
{!PDFData}
</apex:page>
@SamuelSalesforce

This comment has been minimized.

Copy link

@SamuelSalesforce SamuelSalesforce commented May 28, 2018

Hi
Thank you fro sharing

  1. I created a Button that calls the VF page
  2. the VF Page called the Linghtning cmp and works perfectly
  3. I'm trying to save the component's html as a pdf. but the value is always null or don't show the entire HTML
    I know that for security reason we don't have access to the DOM but we must have a workaroud
    Thank you !!
@AdrienRiou

This comment has been minimized.

Copy link

@AdrienRiou AdrienRiou commented Aug 9, 2018

Hi, thank you for this code. I have an error message that indicates me that sendDataProc is not defines as a function...

@FabienHuot

This comment has been minimized.

Copy link

@FabienHuot FabienHuot commented Aug 29, 2018

Same as @AdrienRiou, sendDataProc in not a function :(

@meas-michel

This comment has been minimized.

Copy link

@meas-michel meas-michel commented Sep 3, 2018

@FabienHuot and @AdrienRiou, you load the VFP "LightningPDFGeneratorDemo". Once loaded, it will show the button that will allow you to download the PDF. It worked for me just downloading the repo.

@FabienHuot

This comment has been minimized.

Copy link

@FabienHuot FabienHuot commented Sep 4, 2018

Tahnks @meas-michel. I finally get it work ! Thanks :)

@toanshulverma

This comment has been minimized.

Copy link
Owner Author

@toanshulverma toanshulverma commented Sep 13, 2018

@AdrienRiou @FabienHuot: I believe, you need to double check that the function is being passed as parameter to lightning component. Refer line 32 within LightningPDFGeneratorDemo.vfp

@toanshulverma

This comment has been minimized.

Copy link
Owner Author

@toanshulverma toanshulverma commented Sep 13, 2018

@SamuelSalesforce : Can you elaborate a bit more?

@mkkillough

This comment has been minimized.

Copy link

@mkkillough mkkillough commented Oct 11, 2018

I don't understand how you would use this to show a whole lightning component inside of a PDF.
This puts javascript created by a lightning component into a PDF.
How would I put a whole lightning component into the pdf?

@eastwood84

This comment has been minimized.

Copy link

@eastwood84 eastwood84 commented Oct 21, 2018

The idea is that the data is passed to apex controller from the lightning component (js) and passed back as a pageReference thus redirecting to page formatted to display the data as a pdf. I understand what you're thinking, I think, as I am trying to make a lightning component that creates a pdf of itself and any data that is in scope. You have to use the pageReference as an object and initialize it in the controller and thus call a redirect (navService.navigate(pageReference);. I'm a little stuck myself getting an invalid url error so I haven't configured the pageReference correctly. Here is a link to documentation. https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_navigation_page_definitions.htm

https://salesforce.stackexchange.com/questions/205065/how-to-generate-view-pdf-using-lightning-components/205227
At this point I'm trying to nest this in an iframe in my lightning component. Almost there... yep, it works, now to get images from the parentobject in there.

@toanshulverma

This comment has been minimized.

Copy link
Owner Author

@toanshulverma toanshulverma commented Dec 1, 2018

I don't understand how you would use this to show a whole lightning component inside of a PDF.
This puts javascript created by a lightning component into a PDF.
How would I put a whole lightning component into the pdf?

This example shows how we can pass required in-memory data from lightning component to visualforce, to be able to natively generate PDF documents. Essentially, a lightning component is combination of UI + FUNCTIONALITY + DATA, to generate a PDF, you primarily need DATA (you may choose to use same UI, but it's often not effective for rending PDF documents). So, using this example, as far as you can send DATA to your VF controller, you can design a VF page to generate PDF document in desired layout.

Also, this example is applicable primarily for Classic interface. Hope that answers your question.

@angular1583

This comment has been minimized.

Copy link

@angular1583 angular1583 commented Dec 7, 2018

Same as @AdrienRiou, sendDataProc in not a function
This page has an error. You might just need to refresh it.
Action failed: c:Expence$controller$downloadDocument [sendDataProc is not a function]
Failing descriptor: {c:Expence$controller$downloadDocument}

@tinyamasisurum0

This comment has been minimized.

Copy link

@tinyamasisurum0 tinyamasisurum0 commented May 13, 2019

Thanks for the share.
How can I take control of var dataToSend and style it in PDFGenerator.vfp
Like:

` <apex:pageBlock title="My Content">

    <apex:pageBlockTable value="{!PDFData}" var="item">

        <apex:column value="{!item.aBCHoursRequired}"/>

    </apex:pageBlockTable>

</apex:pageBlock>  

`

Actually I want to use apex:pageBlockTable to create a table but I got an error because PDFData variable is a string.

Currently I am getting a JSON printed with no spaces or breaks which seems not read-friendly.

SHould I style the JSON in LightningPDFGeneratorDemoApp.app ? But how?
Thanks,

@lxicorruptxl

This comment has been minimized.

Copy link

@lxicorruptxl lxicorruptxl commented Aug 8, 2019

Can you please demonstrate what it would look like to display Account Name and ID in a pdf visualforce page. Not sure what goes in the callback on the js controller or how to structure "datatosend". Thanks

@Abhilash090

This comment has been minimized.

Copy link

@Abhilash090 Abhilash090 commented May 26, 2020

image

When i click on Click Download button getting error, please help me on this.

@rudra-shukla

This comment has been minimized.

Copy link

@rudra-shukla rudra-shukla commented Oct 14, 2020

Hi,
Thanks for the explanation and code. i want to create a lightning component and show all accounts in a table and on a button click show that table in PDF. Any one can help me on this.

@toanshulverma

This comment has been minimized.

Copy link
Owner Author

@toanshulverma toanshulverma commented Oct 15, 2020

Thanks for the share.
How can I take control of var dataToSend and style it in PDFGenerator.vfp
Like:

` <apex:pageBlock title="My Content">

    <apex:pageBlockTable value="{!PDFData}" var="item">

        <apex:column value="{!item.aBCHoursRequired}"/>

    </apex:pageBlockTable>

</apex:pageBlock>  

`

Actually I want to use apex:pageBlockTable to create a table but I got an error because PDFData variable is a string.

Currently I am getting a JSON printed with no spaces or breaks which seems not read-friendly.

SHould I style the JSON in LightningPDFGeneratorDemoApp.app ? But how?
Thanks,

Two options i can think of right now:

  1. You can form the json; parse it within apex controller and set value to controller's list property; bind a datatable to this list property
  2. You can generate the html within your code and send serialized html code in PDFData attribute
@gbzitoo

This comment has been minimized.

Copy link

@gbzitoo gbzitoo commented Jun 29, 2021

imagem

Quando eu clico no botão Click Download recebendo um erro, por favor me ajude nisso.

Conseguiu resolver ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment