[SalesForce] Visualforce: How to render multiple records, 1/page in a single PDF

I would like to render PDF page base on the amount of record I retrieve using SOQL.

example If I have 10 invoice forms, I should be able to render 10 pages in 1 PDF.

Best Answer

This is possible with having some extra css.
Wrap your invoice data with a div and introduce css class as below

<style>
.page-break {
        page-break-before:always;
    }
.page-break:first-child {
         page-break-before: avoid;
    }

@page {
        size: A4;
        @bottom-center {
            content: "Page " counter(page) " of " counter(pages);
        }
    }
</style>

<apex:repeat value="{!yourList}" var="item">
  <div class="page-break" >
    <!-- Your content -->
  </div>
</apex:repeat>

page-break css class help you to start every new child of your list in a new page. And in above .page-break:first-child is for avoiding generating empty first page. @page is an additional but thought to add it since in this kind of scenario it's valuable. It's giving you in which page are you out of how many pages.

Related Solutions

[SalesForce] Render a Visualforce page as PDF issues

The PDF renderer's support of CSS Is limited and some trial and error is nearly always required to get the results you want.

I'm not sure why your colours don't work, I've had no issues with that in the past so you might need to post the CSS and markup to show how you're doing it. The code you're using for landscape is correct, so I'm lead to think that you might have a syntax error somewhere that's breaking everything below a certain point.

Finally, you could open the PDF In an iFrame or similar, but since different operating systems and browser combinations handle things very differently I'd be inclined to just open the page in a new tab and let the user handle it how they'd like to. For instance on my Mac, Firefox asks me to save PDFs or open them in Preview (a local app) whereas Chrome displays PDFs in the browser window.

Update

The following CSS was being used:

table tr:nth-child(4n+2) { background: #ccc; }

Which while valid, is not supported by the PDF renderer. The solution is to apply the selection logic via Visualforce/Apex, using the styleClass parameter to specify a CSS class for the desired rows.

[SalesForce] How to render Multiple PDFs from a single Visualforce page

Firstly, all the columns are not fitting in a single PDF.

Use fewer columns, a smaller font, or some other design, such as a multi-line row. You can't go as wide as you'd like, that's a limitation of Flying Saucer, the underlying rendering engine.

Secondly, how do I turn the PDF into a landscape mode, like a full width of the browser.

Use the following CSS:

@page { size: A4 landscape; }

Thirdly, is there a way through which I could render in multiple PDFs for the single VF page (the 13 columns coming in probably 2 PDFs).

You can render as many PDFs as you'd like, assuming you don't run into other limits, such as CPU time. If each row is the same height, you could render the table in two parts, say 7 columns and 6 columns. You can use the CSS page-break-after: always to effectively re-align the tables without much effort. It would look like:

<div style="page-break-after: always">
    <!-- render first 7 columns -->
</div>
<div>
    <!-- render last 6 columns -->
</div>

Best Answer

Related Solutions

[SalesForce] Render a Visualforce page as PDF issues

[SalesForce] How to render Multiple PDFs from a single Visualforce page

Related Topic