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

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

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

commented Aug 29, 2018

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

@meas-michel

This comment has been minimized.

Copy link

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

commented Sep 4, 2018

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

@toanshulverma

This comment has been minimized.

Copy link
Owner Author

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

commented Sep 13, 2018

@SamuelSalesforce : Can you elaborate a bit more?

@mkkillough

This comment has been minimized.

Copy link

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

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

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

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

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,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.