Sample Code to Generate PDF from Lightning components with in-memory data

DataDisplayController.cls

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;
    }
}

DataProcessor.cmp

<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>

DataProcessorController.js

({
 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
  });
 }
})

LightningPDFGeneratorDemo.vfp

<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>

LightningPDFGeneratorDemoApp.app

<aura:application  extends="ltng:outApp">
    <c:DataProcessor />
    
</aura:application>

PDFGenerator.vfp

<apex:page controller="DataDisplayController" renderAs="pdf">
    {!PDFData}
</apex:page>

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 !!

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

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

@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.

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

@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

@SamuelSalesforce : Can you elaborate a bit more?

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?

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.

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.

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}

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,

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

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

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.

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

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

Conseguiu resolver ?

I have this type of error how to I resolve. Please help me

I have this type of error how to I resolve. Please help me

For running the demo, access LightningPDFGeneratorDemo visualforce page. The lightning app is not setup for demo.

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

Conseguiu resolver ?

Will need more details. I just recreated whole solution afresh in a separate environment and it is working as expected. So, I assume, there must be something missing/wrong at your end. Do try to re-create this in a fresh developer org for clarity.