做对日开发的同学应该经常会遇到需要用Visualforce page来做PDF张票的问题，
那么renderAs="pdf" 之后，样式与转换之前的Visualforce page存在差异，CSS Style不起作用，应该会是大家遇到的第一道难关。
本文目的就在于解决renderAs="pdf" 样式转换差异，让大家能够做出完美账票。
首先我们开发一个普通的Visualforce page, 为PDF内容打下基础（宽度有些大，不过没关系，PDF之后会自适应）：
<apex:page>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #0070c9;
text-align: center;
}
p {
font-size: 16px;
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th {
border: 1px solid #0070c9;
padding: 8px;
background-color: #94bee0;
text-align: center;
}
td {
border: 1px solid #0070c9;
padding: 8px;
background-color: #f2f2f2;
text-align: center;
}
</style>
</head>
<body>
<h1>Colorful PDF Sample</h1>
<p>This is a colorful PDF with a title, summary, and a data table.</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td style='color:orange;'>john@example.com</td>
<td>555-1234</td>
</tr>
<tr>
<td>Jane Smith</td>
<td style='color:red;'>jane@example.com</td>
<td>555-5678</td>
</tr>
</tbody>
</table>
</body>
</html>
</apex:page>
然后我们加上renderAs="pdf" ，看看效果：
<apex:page renderAs="pdf">
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #0070c9;
text-align: center;
}
p {
font-size: 16px;
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th {
border: 1px solid #0070c9;
padding: 8px;
background-color: #94bee0;
text-align: center;
}
td {
border: 1px solid #0070c9;
padding: 8px;
background-color: #f2f2f2;
text-align: center;
}
</style>
</head>
<body>
<h1>Colorful PDF Sample</h1>
<p>This is a colorful PDF with a title, summary, and a data table.</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td style='color:orange;'>john@example.com</td>
<td>555-1234</td>
</tr>
<tr>
<td>Jane Smith</td>
<td style='color:red;'>jane@example.com</td>
<td>555-5678</td>
</tr>
</tbody>
</table>
</body>
</html>
</apex:page>
刷新之后变成了可下载的PDF，但是，和Visualforce page差异很大，位置和表格边框之类的，全都不对劲。
于是，我们加上新的属性到<apex:page>中：
<apex:page renderAs="pdf" applyHtmlTag="false" applyBodyTag="false" standardStylesheets="false" showHeader="false" showChat="false">
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #0070c9;
text-align: center;
}
p {
font-size: 16px;
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th {
border: 1px solid #0070c9;
padding: 8px;
background-color: #94bee0;
text-align: center;
}
td {
border: 1px solid #0070c9;
padding: 8px;
background-color: #f2f2f2;
text-align: center;
}
</style>
</head>
<body>
<h1>Colorful PDF Sample</h1>
<p>This is a colorful PDF with a title, summary, and a data table.</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td style='color:orange;'>john@example.com</td>
<td>555-1234</td>
</tr>
<tr>
<td>Jane Smith</td>
<td style='color:red;'>jane@example.com</td>
<td>555-5678</td>
</tr>
</tbody>
</table>
</body>
</html>
</apex:page>
再次刷新，一个漂亮的PDF出现了！
总结：
问题的原因在于默认情况下，Visualforce页面会生成完整的HTML文档，包括<html>、<head>、和<body>等标签，这会导致我们原先文件中的标签失灵。
为了不要那些多余的东西，只显示我们自己的内容，必须添加下列属性进行修正, ：
1.applyHtmlTag="false" 此属性可以防止Salesforce应用默认的<html>标签样式。
2.applyBodyTag="false" 此属性可以防止Salesforce应用默认的<body>标签样式。
3.showHeader="false" 此属性可以防止Salesforce应用默认的<head>标签样式。
4.standardStylesheets="false" 此属性可以防止Salesforce应用默认的标准样式表。
5.showChat="false" 此属性可以防止Salesforce应用默认的聊天侧边栏。
以上，欢迎订正。
