飞碟不渲染 PDF

Question

I am converting HTML form to PDF with Flying-Saucer but the PDF output doesn't have all the formatting (CSS & Bootstrap Applied). It is also clipping the side of the page.

The form rendered in HTML looks like:

But the PDF comes out as:

From the above it looks like its getting the panes with rounded edges, but no colors, so I presume its lacking the css.

The HTML relies on a external css file, boostrap css, and bootswatch css theme. So the css references in the html are:

<link rel="stylesheet" type="text/css" href="/css/assessment.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">

The java to generate the PDF using Flying Saucer is:

    @Qualifier("templateEngine")
@Autowired
private TemplateEngine templateEngine;
public void createPdf(String templateName, Map map) throws Exception {
    Assert.notNull(templateName, "The templateName can not be null");
    Context ctx = new Context();
    if (map != null) {
        Iterator itMap = map.entrySet().iterator();
        while (itMap.hasNext()) {
            Map.Entry pair = (Map.Entry) itMap.next();
            ctx.setVariable(pair.getKey().toString(), pair.getValue());
        }
    }

    String processedHtml = templateEngine.process(templateName, ctx);
    FileOutputStream os = null;
    //String fileName = UUID.randomUUID().toString();
    String fileName = "Assessment.pdf";
    try {
        final File outputFile = File.createTempFile(fileName, ".pdf");
        os = new FileOutputStream(outputFile);

        ITextRenderer renderer = new ITextRenderer();
        renderer.getSharedContext().getUserAgentCallback().setBaseURL("/resources/static/css");
        renderer.setDocumentFromString(processedHtml);
        renderer.layout();
        renderer.createPDF(os, false);
        renderer.finishPDF();

I am not entirely sure that this path is correct:

renderer.getSharedContext().getUserAgentCallback().setBaseURL("/resources/static/css");

Finally the project structure looks like:

Answer 1

I had a similar problem when using Bootstrap 4.x. It seems you are using Bootstrap 4 as well:

https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css

My "clipped on right" problem went away when I switched to Bootstrap 3.x.

Most likely cause:

Flying Saucer does not support 'Flex'. Bootstrap 4.x uses Flex. Bootstrap 3 does not.

For me at least, everything worked perfectly when converting HTML to PDF when I switched to Bootstrap 3.x.