2

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

Improve this question
2
  • Are you using HTML table/s or pageblock/data table/s?
    – Boris Bachovski
    Feb 14, 2013 at 3:21
  • 1
    Can you post relevant Visualforce code and, possibly, a screen shot of the problem tables in pdf? It would likely help you get quicker/better answers to at least have code posted.
    – Peter Knolle
    Feb 14, 2013 at 3:44

2 Answers 2

Reset to default
3

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.

Improve this answer
2
  • CSS is your friend.
    – Mike Chale
    Feb 14, 2013 at 12:04
  • @MikeChale The best friend after Javascript ☺
    – Sergej Utko
    Feb 14, 2013 at 12:14
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.

This comes down to understanding basic HTML Table formatting. You do not want to use the APEX Panel Grid for this!!! You can format HTML table columns and rows to have unique border lines at the left, top, right and bottom, using a different style and weight (or none) for each one. You can also use the colspan tag to combine columns; something you can't do using APEX Grids! There's absolutely no reason to be using a new table for each line! That's probably a large part of the problems you're having. HTML also allows you to use "border-collapse:collapse" so that adjoining table borders print over top of each other.

I suggest you look at the following links for help with the HTML: http://www.w3.org/TR/CSS2/tables.html and http://www.w3.org/TR/REC-html40/struct/tables.html.

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.

The above links should help you immensely with these issues as well as the ones you have in #2.

The PDF generator can be fussy at times. In my experience, it doesn't always like purely CSS formatted code, especially if you're doing something unique with multiple tables. It also destroys CSS if your code generates any kind of page error. Make certain your controller has an output error line on it too so you'll know if that's happening.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .