[SalesForce] Question on rendering pdf using visual force

I have an issue rendering a pdf using visual force. It is a form with multiple rows and each row has multiple columns on it. There is a need to create borders around specific text around it. I am running into formatting issues and i would like to know if any body has created pdf forms in visual force with multiple rows having multiple columns and borders. Please see the issue.

  1. On the header, you would notice a line separating the logo and text which is not in the original design. I am panel grid which are individual tables for each row because each row has different column width. The image width and height is pushing the first column compared to the text column and so I am not able to create separate borders for each column. As a result , I had to use the border tag on the table to format it and it puts the column separator.
  2. Next to the last row there is a row which shows approved by and certified by with dates . In the original design, there is a border around the date column which is very hard to create in the visual force page. The reason is that that row has a lot of text which I had to pad with spaces to get the space and creating a border around the date is causing weird formatting issues.

Thanks
Buyan

Best Answer

The PDF creation is very easy in Visualforce, much easier than Excel creation. The PDF file "understands" the CSS styles, so you can design the template with almost any style rule.

Normally i use a "plain" html for generating an PDF export. First i am defining a format for the whole page:

<apex:page controller="MyController" showHeader="false" renderAs="pdf">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
@page{
    /* Page location: portrait or landscape */
    size:A4 portrait;

    /* Here is the page counting defined, eg.: Page 1 - 10 */
    @bottom-right {
        content: "Page " counter(page) " - " counter(pages);
        font-family: 'Arial', 'Helvetica', sans-serif;
        font-size:10px;
    }
}
@media print {
    /* Need this for grouping the table headers (headers are not output repeatedly) */
    thead {
        display: table-header-group;
    }
}
/* Here defining the header style */
.tableHeader {
    font-family: Arial,Helvetica,sans-serif;
    font-size:12px;
    background-color:#F2F2F2;
    border-bottom: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
}
/* Here defining the content style */
.tableContent {
    font-family: Arial,Helvetica,sans-serif;
    font-size:11px;
    border-bottom: 1px solid #CCCCCC;
}
</style>
</head>

Now comes a plain html table with headers. Im defining extra css-class for table headers .tableHeader:

<table width="100%" border="0" cellspacing="0" cellpadding="5">
    <THEAD> 
        <tr>
            <td class="tableHeader">Name</td>      
            <td class="tableHeader">Date</td>
        </tr>
    </THEAD>

And now we will repeat all columns with own style .tableContent:

    <TBODY>
        <apex:repeat value="{!myObject}" var="item">
            <tr>
                <td class="tableContent">{!item.Name}</td>
                <td class="tableContent">{!item.CreatedDate}</td>
            </tr>
        </apex:repeat>
    </TBODY>

</table>

As you can see you can use CSS styles to define borders, font colors, margins etc.

Related Topic