Java / iText / Flying Saucer：将包含svg标签的HTML转换为pdf

Question

I'm trying to generate a pdf file in Java from HTML. The HTML code contains a svg tag that was generated by Google Charts API to display a column chart.

I tried to do it with Flying Saucer R8 like so:

  StringBuffer sb = new StringBuffer();
    sb.append("<div id='chartArea'><svg width='830' height='400'><defs id='defs'><clipPath id='_ABSTRACT_RENDERER_ID_0'><rect x='45' y='77' width='560' height='247'/></clipPath></defs><rect x='0' y='0' width='830' height='400' stroke='none' stroke-width='0' fill='#ffffff'/><g><rect x='45' y='77' width='560' height='247' stroke='none' stroke-width='0' fill-opacity='0' fill='#ffffff'/><g clip-path='url(#_ABSTRACT_RENDERER_ID_0)'><g><rect x='45' y='323' width='560' height='1' stroke='none' stroke-width='0' fill='#cccccc'/><rect x='45' y='262' width='560' height='1' stroke='none' stroke-width='0' fill='#cccccc'/><rect x='45' y='200' width='560' height='1' stroke='none' stroke-width='0' fill='#cccccc'/><rect x='45' y='139' width='560' height='1' stroke='none' stroke-width='0' fill='#cccccc'/><rect x='45' y='77' width='560' height='1' stroke='none' stroke-width='0' fill='#cccccc'/></g><g><rect x='60' y='323.5' width='49' height='0' stroke='none' stroke-width='0' fill='#757575'/><rect x='140' y='323.5' width='49' height='0' stroke='none' stroke-width='0' fill='#757575'/><rect x='220' y='323.5' width='49' height='0' stroke='none' stroke-width='0' fill='#757575'/><rect x='300' y='323.5' width='49' height='0' stroke='none' stroke-width='0' fill='#757575'/><rect x='380' y='323.5' width='49' height='0' stroke='none' stroke-width='0' fill='#757575'/><rect x='460' y='323.5' width='49' height='0' stroke='none' stroke-width='0' fill='#757575'/><rect x='540' y='111' width='49' height='212' stroke='none' stroke-width='0' fill='#757575'/></g><g><rect x='45' y='323' width='560' height='1' stroke='none' stroke-width='0' fill='#333333'/></g></g><g/><g><g><text text-anchor='middle' x='85.42857142857143' y='343.05' font-family='Arial' font-size='13' stroke='none' stroke-width='0' fill='#222222'>2012-04-26</text></g><g><text text-anchor='middle' x='165.28571428571428' y='360.05' font-family='Arial' font-size='13' stroke='none' stroke-width='0' fill='#222222'>2012-04-27</text></g><g><text text-anchor='middle' x='245.14285714285717' y='343.05' font-family='Arial' font-size='13' stroke='none' stroke-width='0' fill='#222222'>2012-04-28</text></g><g><text text-anchor='middle' x='325' y='360.05' font-family='Arial' font-size='13' stroke='none' stroke-width='0' fill='#222222'>2012-04-29</text></g><g><text text-anchor='middle' x='404.8571428571429' y='343.05' font-family='Arial' font-size='13' stroke='none' stroke-width='0' fill='#222222'>2012-04-30</text></g><g><text text-anchor='middle' x='484.7142857142857' y='360.05' font-family='Arial' font-size='13' stroke='none' stroke-width='0' fill='#222222'>2012-05-01</text></g><g><text text-anchor='middle' x='564.5714285714286' y='343.05' font-family='Arial' font-size='13' stroke='none' stroke-width='0' fill='#222222'>2012-05-02</text></g><g><text text-anchor='end' x='39' y='328.05' font-family='Arial' font-size='13' stroke='none' stroke-width='0' fill='#444444'>0</text></g><g><text text-anchor='end' x='39' y='266.55' font-family='Arial' font-size='13' stroke='none' stroke-width='0' fill='#444444'>6</text></g><g><text text-anchor='end' x='39' y='205.05' font-family='Arial' font-size='13' stroke='none' stroke-width='0' fill='#444444'>12</text></g><g><text text-anchor='end' x='39' y='143.55' font-family='Arial' font-size='13' stroke='none' stroke-width='0' fill='#444444'>18</text></g><g><text text-anchor='end' x='39' y='82.05' font-family='Arial' font-size='13' stroke='none' stroke-width='0' fill='#444444'>24</text></g></g></g><g><g><text text-anchor='middle' x='17.05' y='200.5' font-family='Arial' font-size='13' font-style='italic' transform='rotate(-90 17.05 200.5)' stroke='none' stroke-width='0' fill='#222222'>Amount (USD)</text></g></g><g/></svg></div>");

    Document document = XMLResource.load(new ByteArrayInputStream(sb.toString().getBytes())).getDocument();
    ITextRenderer renderer = new ITextRenderer();
    renderer.setDocument(document,"test");
    String outputFile = "test.pdf";
    OutputStream os = new FileOutputStream(outputFile);
    renderer.layout();
    renderer.createPDF(os);
    os.close();

The result is a generated PDF that contains the chart's axis values but not the chart itself; ie the chart image was not included.

Any ideas or suggestions will be extremely helpful.

Thanks, Shaun

Answer 1

Hopefully you've found a solution to your problem - it's been a month.

However, if you are still looking, and if you have control enough over the page you want to render to PDF, you could try using batik ( http://xmlgraphics.apache.org/batik/ ). I have inherited an older grails app that creates a PDF from a report that does have SVG in it when viewed as a web page. The code first creates a PNG from the SVG elements, then uses the iText renderer to create the PDF.

From the batik project page, there are references to PDF generation, but I couldn't find an example that would take a DOM including some SVG and some "normal" markup and render to PDF.