We all design our HTML pages to look good on the screen, but printing those Web pages is usually an afterthought. To create printable versions of Web pages, the best approach is to use XSLT and XSL-FO to generate a PDF file. You can do the job with an open-source XSLT processor, the XSL Formatting Objects (XSL-FO) vocabulary, and a formatting-object engine.

The XHTML2FO class provides a useful method to automatically transform a XHTML (well formed HTML) document to a FO (formatting objects xml tree). I can also automatically convert it to PDF.

You can use xhtml2fo.xhtml document as source for the following examples.

1 Convert XHTML to PDF

To convert a well formed XHTML document to FO.

Copy
<script>
    var xhtml = "<body><p>hello <b>world</b></p></body>";

    var pdf = new Ax.fop.XHTML2FO().toPDF(xhtml);
</script>

2 Convert XHTML to FO (body content)

To convert a well formed XHTML document to be used as an include of another FO document.

Copy
<script>
    var fo = new Ax.fop.XHTML2FO().toFOBody("<p>hello <b>world</b></p>");
    console.log(fo);
</script>
<fo:block xmlns:fo="http://www.w3.org/1999/XSL/Format" font-size="12pt" line-height="15pt" space-after="12pt">
    hello 
    <fo:inline font-weight="bold">world</fo:inline>
</fo:block>

3 Convert XHTML to FO (root document)

To convert a well formed XHTML document to complete FO document including root and master pages.

Copy
<script>
    var fo = new Ax.fop.XHTML2FO().toFORoot("<p>hello <b>world</b></p>");
    console.log(fo);
</script>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE fo:root [
  <!ENTITY tilde  "&#126;">
  <!ENTITY florin "&#131;">
  <!ENTITY elip   "&#133;">
  <!ENTITY dag    "&#134;">
...
  <!ENTITY euro   "&#x20AC;">
]>
    <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
        <fo:simple-page-master master-name="first" page-height="11in" page-width="8.5in" margin-right="72pt" margin-left="72pt" margin-bottom="36pt" margin-top="72pt">
            <fo:region-body margin-bottom="50pt"/>
            <fo:region-after region-name="ra-right" extent="25pt"/>
        </fo:simple-page-master>
        <fo:simple-page-master master-name="left" page-height="11in" page-width="8.5in" margin-right="72pt" margin-left="72pt" margin-bottom="36pt" margin-top="36pt">
            <fo:region-body margin-top="50pt" margin-bottom="50pt"/>
            <fo:region-before region-name="rb-left" extent="25pt"/>
            <fo:region-after region-name="ra-left" extent="25pt"/>
        </fo:simple-page-master>
        <fo:simple-page-master master-name="right" page-height="11in" page-width="8.5in" margin-right="72pt" margin-left="72pt" margin-bottom="36pt" margin-top="36pt">
            <fo:region-body margin-top="50pt" margin-bottom="50pt"/>
            <fo:region-before region-name="rb-right" extent="25pt"/>
            <fo:region-after region-name="ra-right" extent="25pt"/>
        </fo:simple-page-master>
        <fo:page-sequence-master master-name="standard">
            <fo:repeatable-page-master-alternatives>
                <fo:conditional-page-master-reference master-reference="first" page-position="first"/>
                <fo:conditional-page-master-reference master-reference="left" odd-or-even="even"/>
                <fo:conditional-page-master-reference master-reference="right" odd-or-even="odd"/>
            </fo:repeatable-page-master-alternatives>
        </fo:page-sequence-master>
    </fo:layout-master-set>
    <fo:bookmark-tree>
        <fo:bookmark internal-destination="TableOfContents">
            <fo:bookmark-title>Table of Contents</fo:bookmark-title>
        </fo:bookmark>
    </fo:bookmark-tree>
    <fo:page-sequence master-reference="standard" id="DocumentBody">
        <fo:static-content flow-name="rb-right">
            <fo:block font-size="10pt">
                <fo:table table-layout="fixed" inline-progression-dimension="100%">
                    <fo:table-column column-width="50%"/>
                    <fo:table-column column-width="50%"/>
                    <fo:table-body>
                        <fo:table-row>
                            <fo:table-cell>
                                <fo:block text-align="start">
                      developerWorks loves you!
                    </fo:block>
                            </fo:table-cell>
                            <fo:table-cell>
                                <fo:block text-align="end" font-weight="bold" font-family="monospace">
                      ibm.com/developerWorks
                    </fo:block>
                            </fo:table-cell>
                        </fo:table-row>
                    </fo:table-body>
                </fo:table>
            </fo:block>
        </fo:static-content>
        <fo:static-content flow-name="ra-right">
            <fo:block font-size="10pt">
                <fo:table table-layout="fixed" inline-progression-dimension="100%">
                    <fo:table-column column-width="50%"/>
                    <fo:table-column column-width="50%"/>
                    <fo:table-body>
                        <fo:table-row>
                            <fo:table-cell>
                                <fo:block text-align="start"/>
                            </fo:table-cell>
                            <fo:table-cell>
                                <fo:block text-align="end">
                                    Page 
                      
                                    <fo:page-number/>
                                     of 
                      
                                    <fo:page-number-citation-last ref-id="DocumentBody"/>
                                </fo:block>
                            </fo:table-cell>
                        </fo:table-row>
                    </fo:table-body>
                </fo:table>
            </fo:block>
        </fo:static-content>
        <fo:static-content flow-name="rb-left">
            <fo:block font-size="10pt">
                <fo:table table-layout="fixed" inline-progression-dimension="100%">
                    <fo:table-column column-width="50%"/>
                    <fo:table-column column-width="50%"/>
                    <fo:table-body>
                        <fo:table-row>
                            <fo:table-cell>
                                <fo:block text-align="start" font-weight="bold" font-family="monospace">
                      ibm.com/developerWorks
                    </fo:block>
                            </fo:table-cell>
                            <fo:table-cell>
                                <fo:block text-align="end">
                      developerWorks loves you!
                    </fo:block>
                            </fo:table-cell>
                        </fo:table-row>
                    </fo:table-body>
                </fo:table>
            </fo:block>
        </fo:static-content>
        <fo:static-content flow-name="ra-left">
            <fo:block font-size="10pt">
                <fo:table table-layout="fixed" inline-progression-dimension="100%">
                    <fo:table-column column-width="50%"/>
                    <fo:table-column column-width="50%"/>
                    <fo:table-body>
                        <fo:table-row>
                            <fo:table-cell>
                                <fo:block text-align="start">
                                    Page 
                      
                                    <fo:page-number/>
                                     
                      of 
                                    <fo:page-number-citation-last ref-id="DocumentBody"/>
                                </fo:block>
                            </fo:table-cell>
                            <fo:table-cell>
                                <fo:block text-align="end"/>
                            </fo:table-cell>
                        </fo:table-row>
                    </fo:table-body>
                </fo:table>
            </fo:block>
        </fo:static-content>
    </fo:page-sequence>
</fo:root>