Search code examples
javahtmlpdfitextgenerate

Creating PDF file from HTML causes text to exceed the right margin (java + itext)

I'm using a rich text editor on the frontend to let users create PDF files (using java + itext). The problem is that when a user enters a large amount of spaces (pressing the space bar), it causes the text to exceed the right margin of the PDF file.

Normal text: enter image description here

PDF: enter image description here

Now I add a lot of whitespaces: enter image description here

PDF: enter image description here

This is the HTML template I'm using to generate the PDF:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style>@page { size: A4; margin: 15mm 15mm 30mm 15mm; @bottom-left { font-family: Verdana; font-size: 10.0pt; content: "P&aacute;gina " counter(page) " de " counter(pages); } } body { font-family: Verdana; font-size: 10.0pt; } table { border-collapse: collapse; border-spacing: 0; table-layout: auto; -fs-table-paginate: paginate;}
    </style>
</head>
<body>
    <table style="width: 100%;">
        <thead>
            <tr>
                <th style="width: 100%;">
                    some header
                </th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td style="width: 100%;">
                    some footer
                </td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>
                    text from rich editor goes here
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

I already tried setting the table and the body to a specific width in pixels, but it generates the PDF with the same problem.

Here's the code that generates the PDF:

private void createPdfFile(Documento documento, String pathPdf) throws DocumentException, IOException {
    PdfWriter pdfWriter = new PdfWriter(new FileOutputStream(pathPdf));
    PdfDocument pdfDocument = new PdfDocument(pdfWriter);

    PdfDocumentInfo pdfInfo = pdfDocument.getDocumentInfo();
    pdfInfo.setCreator(creatorText);

    if (!StringUtils.isEmpty(documento.getTitleMetadata())) {
        pdfInfo.setTitle(documento.getTitleMetadata());
    }
    if (!StringUtils.isEmpty(documento.getAuthorMetadata())) {
        pdfInfo.setAuthor(documento.getAuthorMetadata());
    }
    if (!StringUtils.isEmpty(documento.getSubjectMetadata())) {
        pdfInfo.setSubject(documento.getSubjectMetadata());
    }

    ConverterProperties converterProperties = new ConverterProperties();
    HtmlConverter.convertToPdf(htmlHeader + documento.getBodyHtml() + htmlFooter, pdfDocument, converterProperties);

    pdfDocument.close();
}
Solution

  • I set the CSS property "table-layout" to "fixed" and it works property now. The complete HTML template is:

    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style>@page { size: A4; margin: 15mm 15mm 30mm 15mm; @bottom-left { font-family: Verdana; font-size: 10.0pt; content: "P&aacute;gina " counter(page) " de " counter(pages); } } body { font-family: Verdana; font-size: 10.0pt; } table { border-collapse: collapse; border-spacing: 0; table-layout: auto; -fs-table-paginate: paginate;}
    </style>
</head>
<body>
    <table style="width: 100%; table-layout: fixed;">
        <thead>
            <tr>
                <th style="width: 100%;">
                    some header
                </th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td style="width: 100%;">
                    some footer
                </td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>
                    text from rich editor goes here
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>