How to print a Lightning Component with record data - PART 2

Hello Trailblazers !

In this blog post, we are going to see how to print Lightning Component and how we can hide some elements while printing using standard slds class.

.slds-no-print selector is used to hide a component when printing a page.

Example:

<div class="slds-no-print">hide this div when printing</div>

//AccountController.apxc
public class AccountController {
 @AuraEnabled 
    public static String getAccountName(String accId){
        String accName;
        if(accId != null){
            accName = [SELECT id, Name FROM Account WHERE id= :accId].Name;
            System.debug('accName'+accName);
            return accName;
        }else{
            return null;
        }
    }
}
 

Step 1 : Create Lightning Component that you want to print

<!-- AccountComponent.cmp-->
<aura:component controller="AccountController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="accName" type="String"/>
    <lightning:button class="slds-no-print slds-align_absolute-center slds-m-around_xx-small"><a style="text-decoration: none;" href="{!'/c/PrintComponent.app?recId='+v.recordId}" target="_blank" class="">Print Preview</a></lightning:button>
    <lightning:icon iconName="utility:company" alternativeText="Account" title="Account Name"/>{!v.accName}
</aura:component>

/* AccountComponentController.js */
({
    doInit : function(component, event, helper) {
        //To retrive account name 
        var action = component.get("c.getAccountName");
        var accRecordId = component.get("v.recordId");
        action.setParams({          
            "accId": accRecordId
        });
        
        action.setCallback(this,function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var aName = response.getReturnValue();
                component.set("v.accName",aName);
            }else if (state === "INCOMPLETE") {
                console.log("Incomplete");
            }else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " + errors[0].message);
                    }
                }else {
                    console.log("Unknown error");
                }
            }
        });
        $A.enqueueAction(action);
    }
})

Step 2 : Create Lightning App to call lightning component in it.

<!-- PrintComponent.app-->
<aura:application extends="force:slds" access="global">
    <ltng:require scripts=""  afterScriptsLoaded="{!c.scriptsLoaded}" />
    <aura:attribute name="recId" type="String" />
    <aura:attribute name="isLoaded" type="Boolean" default="false"/>
    <aura:if isTrue="{!v.isLoaded}">
        <div class="printCMP">
            <c:AccountComponent recordId="{!v.recId}"/>
        </div>
    </aura:if>
</aura:application>

Step 3: Use window.print() inside js function

/* PrintComponentController.js */
({
 scriptsLoaded : function(component, event, helper) {
        component.set("v.isLoaded", true);
        setTimeout(function(){
            window.print();
        }, 2000);
 }
})

Step 4 : Use @media print in css

<!-- PrintComponent.css-->
@media print {
.THIS.printCMP {
        background-color: white;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 15px;
        font-size: 14px;
        line-height: 18px;
    }
}

Resources

1. https://www.lightningdesignsystem.com/utilities/print/