3

I have an issue in salesforce lightning that how can I convert the following Salesforce lightning component into PDF. We have working on something that we are able to convert the HTML page into PDF but the chart on the page get squeezed or compressed. The chart we creating with the help of amcharts in salesforce lightning component controller. We getting half image of the chart on the pdf rather than getting full chart image on the Pdf. For creating PDF on salesforce lightning we using JSPdf and HTMl2Canvas and for creating the chart with the help of client-side controller we using amcharts. we are able to get the full chart on the salesforce page but we are not able to get the full image of the chart on the pdf. So how can we convert our lightning component into the pdf?

The Code For Creating the charts:

amChartParentComponent lightning Component:-

<aura:component >
    <aura:attribute name="lineData" type="Object" required="{!true}" description="The lineData based on which chart renders."/>
    <aura:attribute name="areaData" type="Object" required="{!true}" description="The areaData based on which chart renders."/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <style>
        .chartDiv {width:500px; height:500px; float:left; margin: 50px;border: 1px solid #ccc4c4; padding:10px;}
    </style>
    <div class="chartDiv">
        <c:BarChartImplemtation type="line" 
                    data="{!v.lineData}" 
                    bullettype="square"
                    charttitle="Line Chart"
                    xaxistitle="X-Axis"
                    yaxistitle="Y-Axis"
                    bullettextposition="top"
                    bullettext="x"
                    bulletballoonttext=""
                    linecolor="blue"
                    /> 
    </div>
    <div class="chartDiv">
        <c:BarChartImplemtation type="area" 
                    data="{!v.areaData}" 
                    bullettype="square"
                    charttitle="Area Chart"
                    xaxistitle="X-Axis"
                    yaxistitle="Y-Axis"
                    bullettextposition="top"
                    bullettext="x"
                    bulletballoonttext=""
                    linecolor="blue"
                    /> 
    </div>

</aura:component>

amChartParentComponent lightning Component Controller.js is :-

({
    doInit : function(component, event, helper) {
        var jsonLineData = [{"x": "1","y": 5},{"x": "2","y": 7},{"x": "3","y": 8},{"x": "4","y": 3},{"x": "5","y": 1},{"x": "6","y": 2},{"x": " 7","y": 8}];
        var jsonAreaData = [{"x": "1","y": 5},{"x": "2","y": 7},{"x": "3","y": 8},{"x": "4","y": 3},{"x": "5","y": 1},{"x": "6","y": 2},{"x": " 7","y": 8}];
        component.set('v.areaData', jsonAreaData);
        component.set('v.lineData', jsonLineData);
    },
    reRenderCharts: function (component, event, helper) {
        component.set('v.chartRendered', false);
    }
})

This where the chart will Form in on lightning Page:- This BarChartImplemtation lightning Component:-

<aura:component controller="BarChartController" >
    <aura:attribute name="stageCount" type="Integer[]"/>
 <ltng:require scripts="{!join(',',$Resource.amchart + '/amcharts/amcharts.js', $Resource.amchart + '/amcharts/serial.js',$Resource.amchart + '/amcharts/gantt.js',$Resource.amchart + '/amcharts/themes/light.js',$Resource.amchart + '/amcharts/gauge.js',$Resource.amchart + '/amcharts/pie.js',$Resource.amchart + '/amcharts/radar.js',$Resource.amchart + '/amcharts/xy.js',$Resource.amchart + '/amcharts/funnel.js')}"  afterScriptsLoaded="{!c.scriptsLoaded}" />
    <aura:attribute name="scriptsLoaded" type="Boolean" default="{!false}"/>
    <aura:attribute name="type" type="String" required="{!true}" description="Type of the chart user wants to render."/>
    <aura:attribute name="data" type="Object" required="{!true}" description="The data used by chart to render."/>
    <aura:attribute name="bullettype" type="String" required="{!true}" description="The bullet shape used in the chart."/>
    <aura:attribute name="bullettextposition" type="String" required="{!true}" description="The position of the text to be displayed for a bullet shape."/>
    <aura:attribute name="bullettext" type="String" required="{!true}" description="The value to be displayed as text for a bullet shape."/>
    <aura:attribute name="bulletballoonttext" type="String" required="{!true}" description="Controlling the hovering and text to be displayed on bullet."/>
    <aura:attribute name="linecolor" type="String" required="{!true}" description="The line color of chart to be displayed."/>
    <aura:attribute name="charttitle" type="String" required="{!true}" description="The chart title to be dispalyed."/>
    <aura:attribute name="xaxistitle" type="String" required="{!true}" description="The X-axis text to be dispalyed."/>
    <aura:attribute name="yaxistitle" type="String" required="{!true}" description="The Y-axis text to be dispalyed."/>
        <div aura:id="chartContainer" style="width: 100%; height: 100%; background-color: #FFFFFF;" ></div>
</aura:component>

The BarChartImplemtation Controller Js:-

scriptsLoaded : function(component, event, helper) {        
        component.set('v.scriptsLoaded', true);
    }

BarChartImplemtation Helper Class:-

drawChart: function (component, helper) { //Define which chart have to be load 
        var chartType = component.get('v.type');
        var chartToDraw = chartType + 'Chart';
        if (chartType === 'column' || chartType === 'bar') chartToDraw = 'columnBarChart';
        if (chartType === 'pie' || chartType === 'donut') chartToDraw = 'pieDonutChart';
        if (chartType === 'stackedcolumn' || chartType === 'stackedbar') chartToDraw = 'stackedColumnBarChart';
        var listOfChartTypes = component.get("v.type").split(',');
        if(listOfChartTypes.length > 1){
            chartToDraw = 'lineAreaHybridChart';
        }
        helper[chartToDraw](component, helper);
        component.set('v.chartRendered', true);
    },
    lineChart: function (component, helper) { // Define Line chart
        var text = "[[x]]:[[value]]";
        var bullettext = "";
        var bulletballoonttext = "";
        var bulletlabeltext = component.get('v.bullettext');
        var bulletballoonlabeltext = component.get('v.bulletballoonttext');
        if(bulletlabeltext == "x"){
            bullettext = "[[x]]";
        }
        else if(bulletlabeltext == "y"){
            bullettext = "[[value]]";
        }else if(bulletlabeltext == "x:y"){
                bullettext = "[[x]]:[[value]]";
            }else if(bulletlabeltext == "x,y"){
                    bullettext = "[[x]],[[value]]";
                }else{
                        bullettext = "";  
                    }

        if(bulletballoonlabeltext == "x"){
            bulletballoonttext = "[[x]]";
        }
        else if(bulletballoonlabeltext == "y"){
            bulletballoonttext = "[[value]]";
        }else if(bulletballoonlabeltext == "x:y"){
                bulletballoonttext = "[[x]]:[[value]]";
            else if(bulletballoonlabeltext == "x,y"){
                    bulletballoonttext = "[[x]],[[value]]";
                }else{
                        bulletballoonttext = "";  
                    }
        AmCharts.makeChart(component.find('chartContainer').getElement(),
                           {
                               "type": "serial",
                               "categoryField": "x",
                               "graphs": [{
                                       "balloonText": bulletballoonttext,
                                       "labelText": bullettext,
                                       "labelPosition": component.get('v.bullettextposition'),
                                       "bullet": component.get('v.bullettype'),
                                       "lineColor": component.get('v.linecolor'),
                                       "valueField": "y"
                                   }],
                               "titles": [{
                                       "text": component.get('v.charttitle')
                                   }],
                               "categoryAxis": {"gridColor": ""},
                               "valueAxes": [
                                   {"gridColor": ""}],
                               "allLabels": [{
                                   "text": component.get('v.xaxistitle'),
                                   "x": "!15",
                                   "y": "!15",
                                   "width": "100%",
                                   "size": 12,
                                   "bold": true,
                                   "align": "right"
                               }, {
                                   "text": component.get('v.yaxistitle'),
                                   //"rotation": 270,
                                   "x": "55",
                                   "y": "22",
                                   "width": "100%",
                                   "size": 12,
                                   "bold": true,
                                   "align": "right"
                               }],
                               "dataProvider": component.get('v.data')});
    },
    areaChart: function (component, helper) { // Define Area chart
        var text = "[[x]]:[[value]]";
        var bullettext = "";
        var bulletballoonttext = "";
        var bulletlabeltext = component.get('v.bullettext');
        var bulletballoonlabeltext = component.get('v.bulletballoonttext');
        if(bulletlabeltext == "x"){
            bullettext = "[[x]]";
        }
        else if(bulletlabeltext == "y"){
            bullettext = "[[value]]";
        }else if(bulletlabeltext == "x:y"){
                bullettext = "[[x]]:[[value]]";
            }else if(bulletlabeltext == "x,y"){
                    bullettext = "[[x]],[[value]]";
                }else{
                        bullettext = "";  
                    }

        if(bulletballoonlabeltext == "x"){
            bulletballoonttext = "[[x]]";
        }
        else if(bulletballoonlabeltext == "y"){
            bulletballoonttext = "[[value]]";
        }else if(bulletballoonlabeltext == "x:y"){
                bulletballoonttext = "[[x]]:[[value]]";
            }else if(bulletballoonlabeltext == "x,y"){
                    bulletballoonttext = "[[x]],[[value]]";
                }else{
                        bulletballoonttext = "";  
                    }
        AmCharts.makeChart(component.find('chartContainer').getElement(),
                           {
                               "type": "serial",
                               "categoryField": "x",
                               "graphs": [{
                                       "balloonText": bulletballoonttext,
                                       "labelText": bullettext,
                                       "fillAlphas": 0.7,
                                       "fillColors": ["#e6f6fc"],
                                       "labelPosition": component.get('v.bullettextposition'),
                                       "bullet": component.get('v.bullettype'),
                                       "lineColor": component.get('v.linecolor'),
                                       "valueField": "y"}],
                               "titles": [{"text": component.get('v.charttitle')}],
                               "categoryAxis": {"gridColor": ""},
                               "valueAxes": [{"gridColor": ""}],
                               "allLabels": [{
                                   "text": component.get('v.xaxistitle'),
                                   "x": "!15",
                                   "y": "!15",
                                   "width": "100%",
                                   "size": 12,
                                   "bold": true,
                                   "align": "right"
                               }, {
                                   "text": component.get('v.yaxistitle'),
                                   "x": "55",
                                   "y": "22",
                                   "width": "100%",
                                   "size": 12,
                                   "bold": true,
                                   "align": "right"
                               }],
                               "dataProvider": component.get('v.data')});
    }

BarChartImplemtation Stlye Component:-

 .THIS .amChartDiv{
    width:100%;
    height:100%;
}

BarChartImplemtation Renderer :-

({
    rerender: function (component, helper) {
        this.superRerender();

        if (!component.get('v.scriptsLoaded') || component.get('v.chartRendered')) {
            return;
        }

       helper.drawChart(component, helper);
    }
})

For Pdf Creation:- To create chart we using this lightning component and this component is called into Lightning application We using Ligtning Component:-

<aura:component extends="force:slds" >
    <ltng:require scripts="/resource/1491918095000/Html2Canvas" />
    <ltng:require scripts="/resource/1491910834000/ForJspdf" />
    <c:amChartParentComponent />
    <ui:button label="generate Pdf" press="{!c.toPDFFormat}"/>
</aura:component>

For Component It is controller:-

toPDFFormat : function(component, event, helper) {
margins = {
                    top: 10,
                    bottom: 10,
                    left: 10,
                    width: 600                  
                  };

      var pdf = new jsPDF('p', 'pt', 'letter');
        pdf.internal.scaleFactor = 2.25;
         pdf.addHTML(document.body,{pagesplit:true,background: '#fff',javascriptEnabled : true},function(){
                console.log(src);
             pdf.output('dataurlnewwindow');
         }, margins);

     }

We getting the chart on the lightning page is like:- enter image description here

And The Chart on the pdf we getting is like:- enter image description here

So as you can see that our chart is complete but when we try to convert these chart into pdf then getting half image of the chart onto the pdf. To implement this in your org you need to use this javascript jsPDF (On githut use this path :- /MrRio/jsPDF/blob/master/dist/jspdf.debug.js) and Html2Canvas (On github :- /niklasvh/html2canvas/blob/master/dist/html2canvas.min.js)and Amcharts

Your Answer

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

Browse other questions tagged or ask your own question.