Hi Team,

I want to generate pdf page using lightning component inside vf page.
I have tried using below code but showing empty pdf file. could please help on this.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="sendData" type="object"/>

    <lightning:recordViewForm recordId="{!v.recordId}" objectApiName="Account">
       
            
       
       
         <div class="slds-wrap slds-text-align_center">
        <lightning:button aura:id="printButton" class="topMargin noPrint" label="Print In Pdf" onclick="{!c.downloadDocument}" />
        </div>
         <div class="slds-wrap slds-text-align_center">
            RWA FORM
        </div>
        <table  class="slds-table slds-table_bordered slds-table_cell-buffer">
            <div class="slds-grid slds-gutters">
                <div class="slds-col">
                    <span>Account##</span>
                </div>
                <div class="slds-col">
                    <span> <lightning:outputField variant="label-hidden" fieldName="Name" /></span>
                </div>
                <div class="slds-col">
                    <span>Effective date</span>
                </div>
                <div class="slds-col">
                    <span><lightning:outputField variant="label-hidden" fieldName="Effective_Date__c" /></span>
                </div>
            </div>
            <br/>
        </table>
        <br/>    
    </lightning:recordViewForm>   
</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(){
          window.print();
        });
         
    }
    
})

Page1:

<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:test", function() {
                $Lightning.createComponent("c:AccountViewForm",
                { 
                    sendData : saveData
                },
                "lightning",
                function(cmp) {
                    // do some stuff
                });
            });
        }
        
        loadComponents();
    </script>
    </apex:form> 
   
</apex:page>

Page2:
<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:test", function() {
                $Lightning.createComponent("c:AccountViewForm",
                { 
                    sendData : saveData
                },
                "lightning",
                function(cmp) {
                    // do some stuff
                });
            });
        }
        
        loadComponents();
    </script>
    </apex:form> 
   
</apex:page>
controller:
public class DataDisplayController {
    public String PDFData {get; set;} 
    
    public DataDisplayController(){
       // PDFData = '';
    }
    
    public PageReference downloadPDF(){
        System.PageReference pageRef = new System.PageReference('/apex/AccountPdfPage');
        
        //ensure pdf downloads and is assigned with defined name
        pageRef.getHeaders().put('content-disposition', 'attachment; filename=RWAForm.pdf');
        
        return pageRef;
    }
}

Regards,
Raju