[Salesforce] Way2 ) How to print a Lightning Component

Create Lightning App to call lightning component in it

Step1) Create the Lightning Component that you want to print 

 

PrintComponent.cmp

<!-- PrintComponent.cmp-->
<aura:component controller="Controller" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
   <aura:attribute name="recordId" type="String"/>
      <lightning:button iconName="utility:print" class="hd-btns inline_item create-btn">
         <a style="text-decoration: none;" href="{!'/c/PrintComponent.app?recId='+v.recordId}" target="_blank">출력</a>
      </lightning:button>
</aura:component>

 

Step2) Create Lightning App to call the lightning component in it

PrintCmp.app

<!-- PrintCmp.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:PrintComponent recordId="{!v.recId}"/>
        </div>
    </aura:if>
</aura:application>

PrintCmpController.js

<!-- PrintCmpController.js-->
({
   scriptsLoaded : function(component, event, helper) {
      component.set("v.isLoaded", true);
      setTimeout(function(){
         window.print();
      }, 2000);
 }
})

 

step3) Use @media print in CSS

 

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

PrintComponent.css

@media print {
    .THIS a[href]:after { 
      content: none !important;
    }
    .THIS a {
      text-decoration:none !important
    }
  }

 

참고