[SalesForce] Add CSS classes and repeating header to Visualforce PDF

I have a Visualforce page that renders as a PDF. It displays a table of data and an image on the header on each page:

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

    div.header {
      position: running(header);
    }

    .sectionTitle {
      font-weight: bold;
    }
  </style>
  </head>

  <div class="header">
    <img src="{!$Resource.logo}" width="25%"/>
  </div>

  <div class="content">
    <table>
      <tr>
        <td class="sectionTitle">test</td>
      </tr>
    </table>
  </div>
</apex:page>

My issue is that I want to apply CSS classes to my table elements; however the CSS is not applied (in this example the text should be bold but it doesn't). If I set the applyBodyTag or applyHtmlTag of apex:page to false, it does take effect the CSS classes for the table but the header breaks.

Any ideas?

Best Answer

Change your <apex:page> to this:

<apex:page renderAs="pdf" applyBodyTag="false">

According to the docs:

A Boolean value that specifies whether or not Visualforce should automatically add a <body> tag to the generated HTML output. Set to false to disable adding the <body> tag to the response, for example, when the tag is statically set in your markup. If not specified, this value defaults to the value of the applyHtmlTag attribute if it's set, or true, if applyHtmlTag isn't set.

Using the sample you provided, I was able to render the following as PDF:

enter image description here

The header (logo) appears on every page as expected using the following VF:

<apex:page renderAs="PDF" applyBodyTag="false">
  <head>
  <style type="text/css" media="print">
    @page {
      margin-top: 1.5in;
      @top-center {
        content: element(header);
      }
    }
    div.header {
      position: running(header);
    }
    .sectionTitle {
      font-weight: bold;
    }
  </style>
  </head>
  <div class="header">
    <center><img src="{!$Resource.logo}" width="25%"/></center>
  </div>
  <div class="content">
    <table>
      <tr>
        <td class="sectionTitle">test</td>
      </tr>
      <!--rest removed for brevity...-->
    </table>
  </div>
</apex:page>

Related Solutions

[SalesForce] pageblocktable rows spanning over page breaks when rendered as pdf

You can set page breaks via CSS, though you may have to change your page's structure to accomplish this. There is a good example on Developerforce that demonstrates this. It works as follows:

A two-dimensional array
Using <apex:repeat> or a similar construct
Having your controller populate the 2-d array

In your controller:

Execute the SOQL to generate your list of results
Populate the 2-D array as follows
1. Each outer element represents a page worth of results
2. Each inner array represents the rows to display

In your VF page:

An outer loop to generate each page
An inner loop to generate each row
CSS to provide page-break-after:always; at the end of each page

The number of elements that you can fit on a page will vary and require some experimentation to get right. Also note that working in Development Mode breaks the CSS as I found out the hard way.

[SalesForce] My Header and Footer overlaps with the content in a PDF Visualforce Page

I think the main issues is that you should put your margin measurements in the @page element and remove them from the content div. For readability, i've put this all in one VF page:

<apex:page standardStylesheets="false" id="pge" renderAs="pdf" controller="DynaPdfPageCTRL" applyHtmlTag="false" showHeader="false" >
<head>
    <style>
        @page {
            margin-top: 4cm;
            margin-bottom: 3cm;

            @top-center {
                content: element(header);
            }
            @bottom-left {
                content: element(footer);
            }
        }

        div.header {
            padding: 10px;
            position: running(header);
        }
        div.footer {
            display: block;
            padding: 5px;
            position: running(footer);
        }
        .pagenumber:before {
            content: counter(page);
        }
        .pagecount:before {
            content: counter(pages);
        }
        div.content {
            border-style:dotted;
            float: left;
            width: 100%;
        }
    </style>
</head>

<!-- HEADER -->
<div class="header">
    <apex:image value="{!$Resource.Header_Test_ES}" height="100%" width="100%"/>
</div>

<!-- FOOTER -->
<div class="footer">
    <div>Page <span class="pagenumber"/> of <span class="pagecount"/></div>
    <apex:image value="{!$Resource.Footer_Test_ES}" width="100%" height="100%" />
</div>

<!-- CONTENT -->
<div class="content">
    <apex:repeat value="{!testStringList}" var="s">                    
        <b>{!s}</b>
        <br/>
    </apex:repeat>  
</div>
</apex:page>

Notice I also had to add the following attributes to the element applyHtmlTag="false" showHeader="false"

Best Answer

Related Solutions

[SalesForce] pageblocktable rows spanning over page breaks when rendered as pdf

[SalesForce] My Header and Footer overlaps with the content in a PDF Visualforce Page

Related Topic