[SalesForce] Render whole div in one page using renderAs PDF

I'm trying to create a page that will be rendered as PDF to the user, and this page is supposed to display a document that has a text that can change depending on what is typed on a rich field text on my custom object.

This document has a text header that doesn't change, and a text that can change, and footer that has the user's digitalized signature and some other information.

Text header
Text body
User signature and additional information

On the example A we have the case in which the text is small enough that the three parts can fit in a single page. No big deal. On example B we have the situation in which the text is bigger, but the signature appears on the second page. No problem either.

The issue here is when the text occupies enough space on the page to break the signature and informations on both pages. I would like this not to happen, and this part 3 to be always thrown to the next page if it cannot fit on the current page.

Is this achievable with the renderAs attribute? Using CSS maybe?

Best Answer

This should work for you:

@media print  
{
    div{
        page-break-inside: avoid;
    }
}

Related Solutions

[SalesForce] renderAs pdf is not working with the footer at the bottom

I strongly suspect the problem is with your CSS. When you renderAs as PDF, you're essentially "printing" the HTML page just like you would on a printer. SF's PDF engine only supports CSS 2.1, not CSS 3.

Your current CSS for the footer looks like the following:

#footer {width:100%;height:80px;position:absolute;content : "My Footer on right Side";bottom:0;left:0;background:#ee5;}

I think you need to define your header and footer layout for the page in an @page using something like the following:

@page {
    margin : 10pt .5in .5in .5in; // use whatever values are appropriate
    @top-center {
        content : "My Header";
     }
    @bottom-right {
        content : "My Footer on Right Side";
        color : #808080; // optional as this can be in your def for content
    }
}

Once you have the above, you can define the header and footer using CSS 2.1 compatible properties.

For more on this, see CSS 2.1 Paged Media and for more information on the PDF rendering engine Salesforce is using see: Flying Saucer.

[SalesForce] Wrapping link in TD tag in Visualforce render as PDF page

Here is a similar solution posted in dev forum. Hope this helps. I have copied the solution here.

private String addWhiteSpaceInUrlTooLong(String text) {
        // Step 1 - Search anchor links
        Pattern ptn = Pattern.compile('<a[^>]*(>.*?)</a>'); // WATCH OUT! This regex doesn't match nested anchor
        Matcher mch = ptn.matcher(text);
        Integer charPerLine = 50; // A whitespace is inserted each charPerLine chars
        while (mch.find()) {
            String toReplace = mch.group(1);
            String substitute = '';
            Integer len = toReplace.length();

            if (len < charPerLine) //No need to replace
                continue;

            Integer elems; // White space to insert

            if (len / charPerLine == 0)
                elems = len / charPerLine;
            else
                elems = len / charPerLine + 1;

            // Insert white spaces
            for (Integer i = 1; i <= elems; i++) {
                if ((charPerLine * i) < len)
                    substitute += toReplace.substring(charPerLine * (i - 1), charPerLine * i) + ' ';
                else
                    substitute += toReplace.substring(charPerLine * (i - 1), len) + ' ';
            }

            text = text.replace(toReplace, substitute);            
        }

        // Step 2 - Search pasted links
        ptn = Pattern.compile('\\b\\s(https?://\\S.*?)(\\s|$)');
        mch = ptn.matcher(text);
        charPerLine = 60;

        while(mch.find()) {
            String toReplace = mch.group();
            String substitute = '';
            Integer len = toReplace.length();

            if (len < charPerLine)
                continue;

            Integer elems;

            if (len / charPerLine == 0)
                elems = len / charPerLine;
            else
                elems = len / charPerLine + 1;

            // Insert white spaces
            for (Integer i = 1; i <= elems; i++) {
                if ((charPerLine * i) < len)
                    substitute += toReplace.substring(charPerLine * (i - 1), charPerLine * i) + ' ';
                else
                    substitute += toReplace.substring(charPerLine * (i - 1), len) + ' ';
            }

            text = text.replace(toReplace, substitute);
        }

        return text;
    }

Use this method as below.

MyCustomObject.richText = addWhiteSpaceInUrlTooLOng(MyCustomObject.richText);

Related Topic