renderAs="pdf" 속성
작업하면서 어려움이 많았다.
내가 발견한 어려움
1. dl,dd,dt 태그 안됨
- 정확히 말하면 css에서 준 속성이 적용이 안된다.
2. css에서 flex 안됨
- 당연히 grid 안된다.
3. font-family: Arial Unicode MS !important;
- pdf 전환시 이 폰트만 한글을 지원한다.
-없으면 한글 출력자체가 안됨
4. Arial Unicode MS
- Arial Unicode MS doesn’t support bold or italic font-weight.
- Arial Unicode MS은 bold가 되지 않는다!! 애초에 지원을 하지 않기 때문!
-이것 때문에 시간을 많이 뺏음;;
Fonts Available When Using Visualforce PDF Rendering | Visualforce Developer Guide | Salesforce Developers
Visualforce PDF rendering supports a limited set of fonts. To ensure that PDF output renders as you expect, use the supported font names. For each typeface, the first font-family name listed is recommended. Arial Unicode MS Helvetica sans-serif SansSerif D
developer.salesforce.com
5. applyHtmlTag="false"
- Visualforce 에서 자동으로 html 태그 생성여부
- 누가 봐달라고해서 보니까 이 속성이 빠져 있더라.. 넣으니까 바로 출력됨 (혹시 모르니 기록)
6. input[type="checkbox"] 작업시
- :checked 같은 경우 @media print에 기입해야 출력이 된다.
7. h1~h6
- 마찬가지로 @media print에 폰트사이즈를 기입해야한다.
8. background-color가 있는경우
- @media print에 -webkit-print-color-adjust: exact;
print-color-adjust: exact
기입해야 칼라가 출력된다.
- color는 문제없었던것 같지만
*{-webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 12px;}
이렇게 모두 적용시켰다.
9. 태그 display 속성
- display를 넣고 해결된 경우가 많았다.
10. 줄바꿈 속성 word-break, word-wrap, overflow-wrap
전부 안된다.
11. 단일태그 전부 닫아줘야 한다.
- <br/> , <img/> 등등등...
나에겐 너무 어려운 세일즈포스..
내용은 수정할 수도 추가 될 수도 있습니다.
<apex:page showHeader="false"
standardStylesheets="false"
sidebar="false"
applyHtmlTag="false"
contentType="text/html;text/css;charset=UTF-8"
language="uft-8"
action="{!doPdfGenerate}"
controller="FS_ExpectedQuotePdfController"
renderAs="pdf"
>
<!-- Begin Default Content REMOVE THIS -->
<head>
<meta charset="UTF-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<title>작업 계획서</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
box-sizing: border-box;
font-size: 12px;
font-weight: 400;
line-height: 1.4;
}
ol,ul {
list-style: none;
}
em, strong, span {
display: inline-block;
vertical-align: top;
font-style: normal;
font-size: inherit;
font-weight: inherit;
}
b, strong, .bold{
font-weight: bold;
}
img {
width: 100%;
display: inline-block;
vertical-align: middle;
}
.hidden, input[type="checkbox"]{
display: none !important;
overflow: hidden;
padding: 0 !important;
margin: 0 !important;
width: 1px;
height: 1px;
line-height: 1px;
font-size: 1px;
border: 0;
clip: rect(0 0 0 0);
}
/* //reset.css */
body,font,.page { font-family: Arial Unicode MS !important;}
.page{
max-width: 21.0cm;
padding: 1.5cm;
margin: 10mm auto;
background-color: #fff;
}
h1{
display: block;
font-size: 20px;
font-weight: bold;
}
h1 span{
display: inline-block !important;
vertical-align: baseline !important;
font-size: inherit;
font-weight: inherit;
}
h2{
display: block;
margin-bottom: 3px;
font-weight: bold;
font-size: 16px;
}
table {
display: table;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
}
tr, th, td{
border-collapse: collapse;
margin: 0 !important;
}
th, td {
padding: 2px 8px;
border: 1px solid;
line-height: 1.4;
vertical-align: middle;
}
th span, td span{
display: block;
padding: 0;
margin: 0;
word-wrap: break-word !important;
}
th, th span{
text-align: center;
vertical-align: middle;
}
th{
font-weight: bold;
}
section table th{
background-color: #eee;
}
.check_wrap li{
display: inline-block;
vertical-align: middle;
margin-right: 12px
}
.check_box label {
display: block;
}
.check_box .check_faux,.check_box .check_txt,.consi_list li{
display: inline-block;
vertical-align: middle;
}
.check_box .check_faux {
width: 18px;
height: 18px;
position: relative;
border: 1px solid #666;
border-radius: 3px;
}
.check_box [type="checkbox"]:checked+label .check_faux:after {
display: block;
content: "✔";
margin: -2px 0 0 2px;
font-size: 16px;
color: #A50034;
}
@page { size: A4; margin: 0; size: 21.0cm 29.7cm; }
@media print {
*{-webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 12px;}
.page {margin: 0; border: initial; border-radius: initial; width: initial; min-height: initial; box-shadow: initial; background: initial;
page-break-inside:avoid; page-break-after:auto}
.secti table th {background-color:#eee !important; -webkit-print-color-adjust:exact;}
h1{font-size: 20px;}
h2{font-size: 16px;}
.check_box .check_faux {
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
position: relative;
border: 1px solid #666;
border-radius: 3px;
}
.check_box [type="checkbox"][checked="checked"]+label .check_faux:after {
display: block;
content: "✔";
margin: -1px 0 0 2px;
font-size: 16px;
color: #A50034;
}
}
</style>
</head>
<body>
<div class="page">
<header>
header
</header>
<section>
<h2>사용계획</h2>
<table>
<caption class="hidden">사용계획에 따른 캡션</caption>
<colgroup>
<col style="width: 12%;"/>
<col/>
<col/>
<col style="width: 12%;"/>
<col/>
<col/>
<col style="width: 12%;"/>
<col style="width: 15%;"/>
</colgroup>
<tr>
<th><span>제목</span></th>
<td colspan="2"><span>내용</span></td>
<th><span>제목</span></th>
<td colspan="2"><span>내용</span></td>
<th rowspan="2"><span>제목</span></th>
<td rowspan="2"><span>내용</span></td>
</tr>
<tr>
<th><span>제목<br/>제목</span></th>
<td><span>내용</span></td>
<td><span>내용</span></td>
<th><span>제목<br/>제목</span></th>
<td><span>내용</span></td>
<td><span>내용</span></td>
</tr>
<tr>
<th><span>제목</span></th>
<td colspan="2"><span>내용</span></td>
<th><span>제목</span></th>
<td colspan="4"><span>내용</span></td>
</tr>
<tr>
<th><span>제목</span></th>
<td colspan="7"><span>내용</span></td>
</tr>
<tr>
<th><span>제목<br/>제목</span></th>
<td colspan="7">
<ul class="check_wrap">
<li class="check_box">
<input class="check_input" type="checkbox" name="options" id="checkbox-82" value="checkbox-82" checked="checked"/>
<label for="checkbox-82">
<span class="check_faux"></span>
<span class="check_txt">선택1</span>
</label>
</li>
<li class="check_box">
<input class="check_input" type="checkbox" name="options" id="checkbox-83" value="checkbox-83" />
<label for="checkbox-83">
<span class="check_faux"></span>
<span class="check_txt">선택2</span>
</label>
</li>
<li class="check_box">
<input type="checkbox" name="options" id="checkbox-84" value="checkbox-84" />
<label for="checkbox-84">
<span class="check_faux"></span>
<span class="check_txt">선택3</span>
</label>
</li>
<li class="check_box">
<input type="checkbox" name="options" id="checkbox-85" value="checkbox-85" />
<label for="checkbox-85">
<span class="check_faux"></span>
<span class="check_txt">선택4</span>
</label>
</li>
<li class="check_box">
<input type="checkbox" name="options" id="checkbox-86" value="checkbox-86" />
<label for="checkbox-86">
<span class="check_faux"></span>
<span class="check_txt">선택5</span>
</label>
</li>
</ul>
</td>
</tr>
</table>
</section>
<footer>
footer
</footer>
</div>
</body>
<!-- End Default Content REMOVE THIS -->
</apex:page>