[SalesForce] visualforce page render as pdf

Below page is called from detail page button.

Pdf page has Company Logo and list of items in tabular format.

Below page works(CSS Formatting) for internal salesforce users but it is not working(CSS Formatting) for community users.

Only Static resource ( Company Logo ) on the vf page is set as public but still not displaying for community user and rest of CSS on vf page is added as Inline css but still not applying for community users

<apex:page standardController="Team__c" renderAs="pdf" applyBodyTag="false" >
        <head>
            <style type="text/css" media="print">
                @page :first {
                    @top-center {
                        content: element(header);
                    }
                }

                @page {    
                    @bottom-left {
                        content: element(footer);
                    }
                }

                * {
                    margin: 0px;
                    padding: 0px;
                }

                div.header {
                    background: url("{!$Resource.Company_Logo}") no-repeat center center;
                    margin-top: 30px;
                    height: 130px;
                    width: 715px;
                    text-align: center;
                    position: running(header);
                }

                div.content {
                    padding-top: 130px;
                }

                div.footer {
                    display: block;
                    padding: 5px;
                    position: running(footer);
                }

                div.subfooter {
                    display: inline-block;
                }

                div.right {
                    float: right;
                }

                .pagenumber:before {
                    content: counter(page);
                }

                .pagecount:before {
                    content: counter(pages);
                }

                .stationName {
                    text-align: center;
                    font-weight: bold;
                    font-size: 18pt;
                    //margin-bottom: 20px;
                }
                .stationName2 {
                    text-align: center;
                    font-weight: bold;
                    font-size: 14pt;
                    margin-bottom: 10px;
                }

                table {
                    width: 100%;
                }

                .centered {
                    text-align: center;
                }

                .right {
                    text-align: right;
                }

                .tableHeader {
                    border-width: 1px 1px 1px 1px;
                    border-color: #000;
                    border-style: solid;
                }


                .sectionHeader {
                    width: 100%;
                    background-color: #eee;
                    font-size: 14pt;
                    padding: 5px;
                    margin: 20px 0px;
                    font-weight: bold;
                }

            </style>
        </head> 
      <div class="header"></div> 
        <div class="content">
            <h1 class="stationName">Work Program</h1><br/>
            <h2 class="stationName2">Daily Deployment</h2>
            <apex:pageBlock >

                <div class="sectionHeader">Locations</div>
                    <apex:pageBlockTable value="{!Team__c.Jobs__r}" var="job" border="1" columnsWidth="15%,50%,5%,10%,20%">
                        <apex:column value="{!Team.Name}" headerClass="centered" styleClass="centered"/>
                        <apex:column value="{!Team.Address__c}" headerClass="centered" styleClass="centered" />

                        <apex:column headerValue="Notes"  headerClass="centered" styleClass="centered"></apex:column>
                    </apex:pageBlockTable>
            </apex:pageBlock>

        </div>
        <div class="footer">
            <div class="centered">Generated by {!$User.FirstName} {!$User.LastName}</div>
            <div>
                <div class="subfooter"><apex:outputText value=" {!NOW()}"/></div>
                <div class="subfooter right">Page <span class="pagenumber"/> of <span class="pagecount"/></div>
            </div>
        </div>
    </apex:page>

Best Answer

CSS is strict when page is rendered as PDF for Community user.

Set apply applyHtmlTag as false along with applyBodyTag. And include html and body tag in your markup. With that the problem should go away.

For images, try setting cache control in static resources as public.

Related Topic