1

I am displaying data in lightning component in table format and have the render the same in PDF.I am able to render this in PDF format but it is not in the table format.

Format in lightning component: enter image description here

PDF Generated: enter image description here

AccountList.cmp

<aura:component controller="AccountsController" >
<aura:attribute name="contacts" type="List" />
<aura:attribute name="accounts" type="List" />
 <aura:attribute name="sendData" type="List"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />      

<div class="slds-col--padded">

 <div class="slds-float_right">

 <lightning:button label="ExportTOPDF" variant="brand" onclick="{!c.downloadDocument}"/>
                    </div>
</div>
<div>
<div class="slds-col--padded slds-size_2-of-3">
    <table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer">
        <thead>
            <aura:iteration items="{!v.accounts}" var="account">
                    <th scope="col"><div class="slds-align_absolute-center" title="{!account.name}">{!account.Name}</div>
                    </th>

            </aura:iteration>
        </thead>  
    </table>

    <table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
        <thead>
            <tr class="slds-text-heading_label">
                <th scope="col"><div class="slds-truncate" title="ID">ID</div></th>
                <th scope="col"><div class="slds-truncate" title="Name">Name</div></th>   
            </tr>
        </thead>

        <tbody>

            <aura:iteration items="{!v.contacts}" var="contact">
                <tr>
                    <th scope="row"><div class="slds-truncate" title="{!contact.Id}">{!contact.Id}</div></th>
                    <td><div class="slds-truncate" title="{!contact.Name}">{!contact.Name}</div></td>

                </tr>
            </aura:iteration>

        </tbody>
    </table>
</div>

AccountListController.js

({
  doInit: function(component, event, helper) {
    helper.getAccountList(component);
  },  

downloadDocument : function(component, event, helper){
var sendDataProc = component.get("v.sendData");
var dataToSend = component.get("v.contacts");
//this is data you want to send for PDF generation
//invoke vf page js method
 sendDataProc(dataToSend, function(){
           //handle callback

 })
 }
 })

AccountListHelper.js

\\Helper is used to provide contact list on Init, Hence I am not providing this part

AccountsController.apexc

 \\ used to provide contact list on Init, Hence I am not providing this part

testPDF.vfp

<apex:page controller="DataDisplayController" showHeader="false" >
<apex:includeLightning />
<apex:form >
    <apex:inputhidden id="hidData" value="{!PDFData}"/>
    <apex:actionfunction name="jsGeneratePDF" action="{!downloadPDF}" />


<div id="workorderInput" />
    <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(){

    $Lightning.use("c:AllAccounts", function() {
      $Lightning.createComponent(
                         "c:AccountList",
                         {sendData: saveData},
                         "workorderInput",
                         function(cmp) {
                         });
    });
    }
    loadComponents();
</script>

 </apex:form>
 </apex:page>

DataDisplayController

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

PDFGenerator.vfp

<apex:page controller="DataDisplayController" renderAs="pdf">
{!PDFData}
</apex:page>
2
  • There are no styles on PDFGenerator page, then it will be rendered as "plain text", which is exactly your case – kurunve Jul 11 '18 at 11:17
  • So Do I have to again put table style in VF page? Is there any other way to achieve this? – devforce Jul 11 '18 at 11:23
2

You can't render lightning components as PDF right now. You have to create a Visualforce page for this, or use an external JS library that renders the content as PDF.

On Summer 17 Salesforce started testing a new PDF renderer which is based on Chromium (it is not GA yet). They said it supports modern standards, including JavaScript, so I guess that it will support instancing/loading of Lightning Components as well.

Sources:

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.