如何合并两个Visual Force页面并确保第二个页面样式生效？

DevOps 小满

2026-7-9

问题：合并Visual Force页面生成PDF时第二个页面样式失效

我正在为Meta Human Salesforce应用创建PDF文件，使用<apex:include>标签合并两个Visual Force页面后，第二个页面的样式未生效，但单独预览第二个页面时样式显示正常。请问如何在合并后正确保留第二个Visual Force页面的样式？

Visual Force Page 1

<apex:page renderAs="pdf" id="HeroPDF" standardController="Meta_Human__c" extensions="attachPDF,Test_Two_Extentions" action="{!loadData}" standardStylesheets="false" applyHtmlTag="false" showHeader="false" applyBodyTag="false">
<html>
<head>
    <style type="text/CSS">
        body {
            font-family: "Metropolis", sans-serif;
            font-size: 14px;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
          border: 1px solid #000;
          padding: 8px;
          width: 50%;
        }
        .headerRow {
            background-color: #E8E8E8;
            color: #b25a00;
        }
        .watermark {
            position: fixed;
            top: 0.5;
            right: 0.5;
            background-image: url("{!$Resource.draft}");
            width: 715px;
            height: 950px;
            z-index: -1;
        }
    </style>
</head>
<body>
    <!-- <div class="watermark"></div> -->
    <div style="margin-bottom:20px;">
        <center><apex:image url="{!$Resource[heroResource]}" width="150" height="88"/></center>
    </div>
       <table>
        <tbody>
            <tr>
                <td class="headerRow" colspan="10"><strong>Hero Information</strong></td>
            </tr>
            <tr>
                <td>
                    <div>
                        <strong>Hero Name</strong>
                    </div>
                    {!Meta_Human__c.Name}
                </td>
                <td>
                    <div>
                        <strong>Real Name</strong>
                    </div>
                    {!Meta_Human__c.Real_Name__c}
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        <strong>Attributes</strong>
                    </div>
                    {!Meta_Human__c.Attributes__c}
                </td>
                <td>
                    <div>
                        <strong>Gender</strong>
                    </div>
                    {!Meta_Human__c.Gender__c}
                </td>
            </tr>
            <tr>
                <td class="headerRow" colspan="10"><strong>Hero Affiliations</strong></td>
            </tr>
            <tr>
                <td>
                    <div>
                        <strong>Meta Human Team</strong>
                    </div>
                    {!Meta_Human__c.Meta_Human_Team__r.Name}
                </td>
                <td>
                    <div>
                        <strong>Current Sidekick</strong>
                    </div>
                    {!Meta_Human__c.Current_Sidekick__r.Name}
                </td>
            </tr>
        </tbody>
    </table>
    <div style="margin-top:24px;">
        <apex:include pageName="HeroPDF2" rendered="{!NOT(ISBLANK(Meta_Human__c.Meta_Human_Team__r.Name))}"/>
    </div>
</body>
</html>
</apex:page>

Visual Force Page 2

<apex:page renderAs="pdf" id="HeroPDF2" standardController="Meta_Human__c" standardStylesheets="false" applyHtmlTag="false" showHeader="false" applyBodyTag="false">
<html>
    <head>
        <style type="text/CSS">
            body {
                font-family: "Metropolis", sans-serif;
                font-size: 14px;
            }
            table {
                margin-top: 24px;
                border-collapse: collapse;
                width: 100%;
            }
            th, td {
              border: 1px solid #000;
              padding: 8px;
              width: 50%;
            }
            .header-row {
                background-color: #E8E8E8;
                color: #b25a00;
            }            
        </style>
</head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td class="header-row"><strong>Hero Team Name</strong></td>
                </tr>
                <tr>
                    <td>
                        {!Meta_Human__c.Meta_Human_Team__r.Name}
                    </td>
                </tr>
                <tr>
                    <td class="header-row"><strong>Total Number of Members</strong></td>
                </tr>
                <tr>
                    <td>
                        {!Meta_Human__c.Meta_Human_Team__r.Total_Count_Of_Members__c}
                    </td>
                </tr>
                <tr>
                    <td class="header-row"><strong>Team Problems</strong></td>
                </tr>
                <tr>
                    <td>
                        {!Meta_Human__c.Meta_Human_Team__r.Team_Problems__c}
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
</apex:page>

样式失效截图

样式未生效的表格截图

原因及解决方法

核心原因

使用<apex:include>合并页面时，被包含页面（HeroPDF2）内的<html>、<head>、<body>标签会被PDF渲染引擎忽略，导致内部的<style>规则无法被加载识别，只有主页面的<head>和<body>结构会被解析。

解决方法

方法1：合并样式到主页面

将HeroPDF2的CSS规则移到主页面的<style>标签中，同时修改被包含页面，移除多余的根标签：

更新主页面的样式：

body {
    font-family: "Metropolis", sans-serif;
    font-size: 14px;
}
table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
  border: 1px solid #000;
  padding: 8px;
  width: 50%;
}
.headerRow {
    background-color: #E8E8E8;
    color: #b25a00;
}
.watermark {
    position: fixed;
    top: 0.5;
    right: 0.5;
    background-image: url("{!$Resource.draft}");
    width: 715px;
    height: 950px;
    z-index: -1;
}
/* 新增第二个页面的样式 */
.second-page-table {
    margin-top: 24px;
}
.header-row {
    background-color: #E8E8E8;
    color: #b25a00;
}

简化HeroPDF2页面：

<apex:page id="HeroPDF2" standardController="Meta_Human__c" standardStylesheets="false" applyHtmlTag="false" showHeader="false" applyBodyTag="false">
    <table class="second-page-table">
        <tbody>
            <tr>
                <td class="header-row"><strong>Hero Team Name</strong></td>
            </tr>
            <tr>
                <td>
                    {!Meta_Human__c.Meta_Human_Team__r.Name}
                </td>
            </tr>
            <tr>
                <td class="header-row"><strong>Total Number of Members</strong></td>
            </tr>
            <tr>
                <td>
                    {!Meta_Human__c.Meta_Human_Team__r.Total_Count_Of_Members__c}
                </td>
            </tr>
            <tr>
                <td class="header-row"><strong>Team Problems</strong></td>
            </tr>
            <tr>
                <td>
                    {!Meta_Human__c.Meta_Human_Team__r.Team_Problems__c}
                </td>
            </tr>
        </tbody>
    </table>
</apex:page>

方法2：使用内联样式

直接在HeroPDF2的元素上添加内联样式，确保样式直接作用于元素：

<apex:page id="HeroPDF2" standardController="Meta_Human__c" standardStylesheets="false" applyHtmlTag="false" showHeader="false" applyBodyTag="false">
    <table style="margin-top:24px;border-collapse:collapse;width:100%;">
        <tbody>
            <tr>
                <td style="background-color:#E8E8E8;color:#b25a00;border:1px solid #000;padding:8px;width:50%;"><strong>Hero Team Name</strong></td>
            </tr>
            <tr>
                <td style="border:1px solid #000;padding:8px;width:50%;">
                    {!Meta_Human__c.Meta_Human_Team__r.Name}
                </td>
            </tr>
            <tr>
                <td style="background-color:#E8E8E8;color:#b25a00;border:1px solid #000;padding:8px;width:50%;"><strong>Total Number of Members</strong></td>
            </tr>
            <tr>
                <td style="border:1px solid #000;padding:8px;width:50%;">
                    {!Meta_Human__c.Meta_Human_Team__r.Total_Count_Of_Members__c}
                </td>
            </tr>
            <tr>
                <td style="background-color:#E8E8E8;color:#b25a00;border:1px solid #000;padding:8px;width:50%;"><strong>Team Problems</strong></td>
            </tr>
            <tr>
                <td style="border:1px solid #000;padding:8px;width:50%;">
                    {!Meta_Human__c.Meta_Human_Team__r.Team_Problems__c}
                </td>
            </tr>
        </tbody>
    </table>
</apex:page>

方法3：用静态资源统一管理CSS

将所有PDF样式存入静态资源文件（如HeroPDFStyles.css），在主页面的<head>中引入：

<apex:stylesheet value="{!$Resource.HeroPDFStyles}"/>

之后主页面和被包含页面只需使用对应的类名即可，无需重复编写样式。

内容的提问来源于stack exchange，提问作者TurtleMan

如何合并两个Visual Force页面并确保第二个页面样式生效？

Visual Force Page 1 #

Visual Force Page 2 #

样式失效截图 #

原因及解决方法 #

核心原因 #

解决方法 #