[SFDC] Visualforce 화면을 pdf로 표시하기

본 포스트에서는 화면을 pdf로 표시하는 방법에 대해 알아보겠습니다.

 

pdf 표시는 주로 시스템에서 계약서, 청구서 등과 같은 장표(?)를 표시, 출력하기 위해 사용합니다.

( 일본에서는 계약서 같은 것들을 통틀어 장표(帳票)라고 하는데 한국에서도 쓰는 말인가..? 서류인가? )

---

# Visualforce 페이지를 pdf 화면으로 설정하기

 

Visualforce 페이지를 pdf 페이지로 설정하기 위해서는 <apex:page> 태그에 renderAs="pdf" 속성을 추가해주면 됩니다.

<apex:page standardController="Account" renderAs="pdf" showHeader="false" applyHtmlTag="false">

<!-- showHeader : Salesforce 탭 헤더 표시 유무 -->
<!-- applyHtmlTag : Visualforce에서 자동으로 html 태그를 생성할지에 대한 유무 -->

 

그럼 이것으로 끝난건가요?

아니죠. 우리는 용도에 맞게 페이지를 설정할 필요가 있습니다. 예를 들어 A4용지 사이즈의 세로형 이라던가..

 

페이지의 규격 등의 설정에는 CSS가 사용됩니다.

<style>
    body {
        // 폰트 설정
        font-family:Arial;
        // font-family:Arial Unicode MS; (일본어 표시가 가능한 유일한 폰트)
    }
    @page {
        // 페이지 설정
        size:A4 portrait;       // A4 세로
        // size:A4 landscape;   // A4 가로
        margin:10mm;            // 상하좌우 여백

        @top-left {
            // 헤더(header) 표시
            font-family: Arial;
            content: "헤더 표시";
        }

        @bottom-center {
            // 풋터(footer)표시
            // [페이지 번호 / 총 페이지 수] 표시
            content: "Page: " counter(page) " / " counter(pages);
        }

        @top-center {
            // 뒷 배경 넣기
            font-family: Arial
            content: "Hello PDF World!";
            white-space: pre;
            font-size:2em;
            font-weight:bold;
            color:#ccc;
            padding-top:300px;
        }
    }
    @media print {
        // 화면 인쇄용 CSS 설정
        // 이곳에서 지정한 CSS는 화면을 인쇄할 때 사용
        body {}
    }
    @media screen {
        // 화면 출력용 CSS 설정
        // 이곳에서 지정한 CSS는 화면을 표시할 때 사용
    }

    .pagebreak {
        // 다음 화면으로 넘기기
        page-break-before:always;
    }
</style>

 

# pdf 페이지 표시하기

 

이곳에서는 버튼을 클릭하여 pdf 페이지를 표시하는 샘플을 작성하겠습니다.

 

1. Apex 컨트롤러에서 pdf 페이지 표시하기

 

☞ Apex Controller

/**
 * @description 버튼 클릭 이벤트로 pdf 페이지를 표시
 */
public PageReference openPdfPage() {

    // pdf 페이지를 지정
    return Page.DspPdf;
}

☞ Visualforce page

<apex:commandButton value="PDF 표시" action="{!openPdfPage}"/>

 

2. Visualforce에서 pdf 표시하기

 

 

☞ Visualforce page

<apex:commandButton value="PDF 표시" action="{!URLFOR($Page.DspPdf)}"/>

 

3. Apex에서 URL지정, Visualforce에서 javascript를 통해 pdf 표시하기

 

☞ Apex Controller

/**
 * @description PDF 페이지 표시용 컨트롤러
 */
public class CntrlDspPdf {

    // PDF 페이지 URL
    public String pdfPageUrl { get; set; }

    /**
     * @description 생성자
     */
    public CntrlDspPdf() {

        // PDF 페에지의 URL 습득
        pdfPageUrl = Page.DspPdf.getUrl();
    }
}

☞ Visualforce page

<script type="text/javascript">
    /**
     * @description VF페이지를 팝업으로 표시
     * @param targetUrl 표시할 페이지의 URL
     */
    function printCliamBill(targetUrl) {

        // PDF페이지를 팝업으로 표시
        var printTarget = window.open(targetUrl, 'PDF Page', 'width=1024,height=800,left=0,top=0');
    }
</script>

<apex:commandButton value="PDF 표시" onclick="printPdf('{!targetUrl}')"/>

---

이상으로 Visualforce를 PDF 형식으로 출력하는 방법에 대해 알아보았습니다.

 

Salesforce AppExchange(Salesforce store)에서 유료로 배포되는 "SkyVisualEditor"라는 것을 사용하면

VIsualforce 페이지나 청구서 같은 pdf 서류 등을 쉽게 작성할 수 있습니다.

(현재 회사에서는 돈 아낀다고 다 직접 만들고 있는 것이 스트레스지만..)

 

 

 

 

 

 

 

참고) developer.salesforce.com/docs/atlas.en-us.226.0.pages.meta/pages/pages_output_pdf_renderas.htm - Visualforce Developer Guide - Render a Visualforce Page as a PDF File