※ 적용되지 않는 것
- Style에서 사용하는 가상 클래스 사용 불가(before, after 등)
- Style에서 사용하는 선택자CSS 적용 불가 (>, nth-child 등)
- 폰트 Style font-size, color 외 적용 불가 (Salesforce에서 제공하는 폰트만 사용 가능)
- 계산식 안됨 > calc(100% - 50px);
- display: flex, grid 적용 불가
- 기타 CSS3 대부분 적용 불가
- Static Resource에 저장한 SVG 나오지 않음
- word-break등 강제 줄변환 적용 불가
+) border의 경우 겹치기 때문에 간격 확인해야함
※ PDF변환시 페이지 너비 확인 (다를 수 있습니다.)
→ 가로의 경우:
@page { size: A4; margin: 0; size: 21.0cm 29.7cm;}→ 세로의 경우 :
@page { size: A4; margin: 0; size: 29.7cm 21.0cm;}※ table reset 속성 (border-collapse: collapse;)
table { display: table; width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
tr, th, td{border-collapse: collapse;margin: 0 !important;}
※ 이미지 불러오기
이미지를 Static Resource에 작성
<apex:image url="{!$Resource.ReportLogo}"/>
※ 기본 구조
<!-- 속성 잘 모릅니다. renderAs="pdf" 추가하면 pdf로 볼 수 있음 -->
<apex:page showHeader="false" sidebar="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false" lightningStylesheets="false" renderAs="pdf">
<style type="text/css">
@page {
size: A4;
margin: 0;
size: 21.0cm 29.7cm;
}
</style>
<script>
</script>
<html>
<body>
<div><!-- Text 작성 --> </div>
</body>
</html>
</apex:page>
개인 공부 기록용.
도움 받아 갑니다. 감사합니다.