如何包含/合并两个视觉强制页面并使第二页样式保持不变？

问题描述 投票：0回答：1

我目前正在尝试为 Meta Human salesforce 应用程序创建一些 pdf，但无法弄清楚如何正确地将两个视觉力页面合并为一个。我正在使用 apex:include 标签来合并两个视觉力页面；但是，当两个页面合并在一起时，不会应用第二个页面的样式。如果我预览第二页，样式将正确应用。

两者合并在一起后，如何正确保留第二个视觉力页面中的样式？

视觉力第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>

视觉力第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>

第二个视觉力页面样式未应用的屏幕截图（英雄团队名称表）

salesforce apex-code visualforce
1个回答
0
投票

感谢

@eyescream
评论。能够使用 
ID selector
解决不适用于第二个 Visualforce 页面的样式。 
ID Selectors
不仅不是解决方案，而是解决方案的一个很好的起点。

最终的工作是将两个 Visualforce 页面的 

body
分配为 
unique ID
和 
prefixing
CSS
与相应的 
unique ID
。如果您仅
prefix
仅第二页中的
CSS
将在合并两个页面时不应用样式。您需要将 
CSS
从第二个 Visualforce 页面移动到第一个 Visualforce 页面。将第二个 Visualforce 页面的 
CSS
移动到第一个 Visualforce 页面真是神奇。

在下面的代码中，我选择将第二个 Visualforce 页面 

CSS
复制到第一个 Visualforce 页面中，这样在预览第二个 Visualforce 页面时，样式仍然会应用。

更新了 Visualforce 第 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;
                }
                #hero1 table {
                    border-collapse: collapse;
                    width: 100%;
                }
                #hero1 th, td {
                    border: 1px solid #000;
                    padding: 8px;
                    width: 50%;
                }
                #hero1 .headerRow {
                    background-color: #E8E8E8;
                    color: #b25a00;
                }
                #hero2 table {
                    margin-top: 24px;
                    border-collapse: collapse;
                    width: 100%;
                }
                #hero2 th, td {
                    border: 1px solid #000;
                    padding: 8px;
                    width: 50%;
                }
                #hero2 .header-row {
                    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 id="hero1">
            <!-- <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>
            <apex:include pageName="HeroPDF2" rendered="{!NOT(ISBLANK(Meta_Human__c.Meta_Human_Team__r.Name))}"/>
        </body>
    </html>
</apex:page>

新 Visualforce 第 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;
                }
                #hero2 table {
                    margin-top: 24px;
                    border-collapse: collapse;
                    width: 100%;
                }
                #hero2 th, td {
                    border: 1px solid #000;
                    padding: 8px;
                    width: 50%;
                }
                #hero2 .header-row {
                    background-color: #E8E8E8;
                    color: #b25a00;
                }
            </style>
        </head>
        <body id="hero2">
            <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>

更新了第二个 Visualforce 页面应用的屏幕截图（英雄团队名称表）

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.