[Salesforce] Way1 ) How to print a Lightning Component

Rendering the Lightning Component to the Visualforce page

Add Aura component to your Visualforce pages to combine features you've built using both solutions. Implement new functionality using Aura components and then use it with existing Visualforce pages.

구축한 기능을 포함하여 아우라 컴포넌트를 비주얼포스 페이지에 더할 수 있다. 아우라 컴포넌트를 이용하여 새로운 기능을 상속하고 기존의 비주얼 포스 페이지에서 사용한다. 

 

There are three steps to add Aura components to a Visualforce page.
1. Add the Lightning Component for Visualforce JavaScript library to your Visualforce page using the <apex:includeLightning/> component.
2. Create and reference a Lightning app that declares your component dependencies.
3. Write a Javascript function that creates the component on the page using $Lightning.createComponent()

1. 태그를 사용하여 비주얼 포스 페이지에 자바스크립트 라이브러리를 라이트닝 컴포넌트에 추가한다.

2. 컴포넌트 종속성을 선언하는 라이트닝앱을 만들고 참조한다.

3. $Lightning.createComponent() 함수를 이용하여 페이지에 컴포넌트를 생성한다.

---

1) Add the Lightning Components for Visualforce JavaScript Library

apex:includeLightning
: Includes the Lightning Components for Visualforce JavaScript library, lightning.out.js, from the correct Salesforce domain.
Salesforce 도메인의 JavaScript 라이브러리인 lightning.out.js를 포함합니다.

 

2) Create and Reference a Lightning Dependency App

This app is globally accessible and extends ltng:outApp. This allow your Lightning components to be styled with the Salesforce Lightning Design System(SLDS). 
이 앱의 접근성은 global이며 ltng:outApp 을 상속한다. 이것은 SLDS, 세일즈포스 라이트닝 디자인 시스템으로 스타일을 지정할 수 있다.

PreviewApplication.app

<aura:application access="GLOBAL" extends="ltng:outApp"> 
    <aura:dependency resource="lightning:button"/>
</aura:application>

3) Creating a Component on a Page

$Lightning.createComponent(String type, Object attributes, String domLocator, function callback)This function is similar to $A.createComponent(), but includes an additional parameter, domLocator, which specifies the DOM element where you want the component inserted. 
이 함수는 $A.createComponent() 와 유사하지만, 추가적인 domLocator 매개변수를 포함하고 있고, 이것은 컴포넌트를 추가하고 싶은 곳의 DOM요소를 지정한다.

Preview.page

<apex:page>
    <apex:includeLightning />

    <div id="lightning" />

    <script>
    	const recordId = "{!$CurrentPage.parameters.id}";
        $Lightning.use("c:PreviewApplication", function() {
          $Lightning.createComponent("c:PrintComponent",
              {recordId : recordId},
              "lightning",
              function(cmp) {
                console.log("component was created");
                // do some stuff such as stopping the spinner
              }
          );
        });
    </script>
</apex:page>

PrintComponent.cmp

<!-- PrintComponent.cmp-->
<aura:component controller="Controller" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
   <lightning:button label="출력" variant="brand" onclick="{!c.printCmp}" class="print-btn" iconName="utility:print"/>
</aura:component>

<!-- PrintComponentController.js-->
({
	printCmp : function(component, event, helper) {
		window.print();
	}
})

<!-- PrintComponent.css-->
@media print {
	// a 태그 밑줄 지우기 
	.THIS a {
		text-decoration: none !important;
	}
	//href 주소 안보이게 
	.THIS a[href]:after { 
      content: none !important;
    }
	// 프린트 영역 
	.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;
    }
    // 프린트 안 할 영역
    .THIS .notPrintCMP {
    	display: none;
	}
}

Documents

Use Lightning Components in Visualforce Pages | Lightning Aura Components Developer Guide | Salesforce Developers

 

apex:includeLightning | Visualforce Developer Guide | Salesforce Developers