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


<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 class="slds-col--padded slds-size_2-of-3">
    <table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer">
            <aura:iteration items="{!v.accounts}" var="account">
                    <th scope="col"><div class="slds-align_absolute-center" title="{!account.name}">{!account.Name}</div>


    <table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
            <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>   


            <aura:iteration items="{!v.contacts}" var="contact">
                    <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>




  doInit: function(component, event, helper) {

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



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


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


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

 function saveData(data, callback){

        var hidData = document.getElementById('{!$Component.hidData}');
       hidData.value = JSON.stringify(data);
        //invoke PDF Generation
        //invoke callback;
        if(typeof callback == 'function') callback();

     function loadComponents(){

    $Lightning.use("c:AllAccounts", function() {
                         {sendData: saveData},
                         function(cmp) {



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;


<apex:page controller="DataDisplayController" renderAs="pdf">
  • There are no styles on PDFGenerator page, then it will be rendered as "plain text", which is exactly your case
    – kurunve
    Jul 11, 2018 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, 2018 at 11:23

1 Answer 1


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.



You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .