openhtmltopdf多页场景下HTML文档渲染高度计算偏差问题

使用openhtmltopdf 1.0.10生成热敏打印机卷纸用的PDF，固定宽度80mm，希望生成单页长PDF避免切纸。参考相关方案实现的高度计算仅在内容较少时有效，当内容超过默认页高后，PDF底部会出现随页数增加而变大的空白（容器底部与body红色背景之间的空隙）。

原HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Printout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
        @page {
            margin: 0;
        }
        body {
            background-color: #ff0000;
        }
        .container * {
            page-break-inside: avoid;
        }
        .container {
            padding: 5mm;
            overflow: hidden;
            page-break-inside: avoid;
            background-color: white;
        }
    </style>
</head>
<body>
    <section class="container">
        <header>HEADER CONTENT</header>
        <section>MAIN CONTENT</section>
        <footer>FOOTER CONTENT</footer>
    </section>
</body>
</html>

原Java计算代码 #

private static void createPdfForPrinting(OutputStream outputStream, Document document)
throws IOException {
    PdfRendererBuilder pdfBuilder = new PdfRendererBuilder();
    try (PdfBoxRenderer pdfRenderer = pdfBuilder
        .withW3cDocument(document, "/")
        .useFastMode()
        .toStream(outputStream)
        .buildPdfRenderer()) {
        pdfRenderer.layout();
        Layer mainLayer = pdfRenderer.getRootBox().getContainingLayer();
        float renderedHeight = findMaxLayerY(mainLayer);
        float pageHeight = convertToMillimeters(renderedHeight);
        pdfBuilder.useDefaultPageSize(80, pageHeight, BaseRendererBuilder.PageSizeUnits.MM)
            .run();
    }
}

private static int findMaxLayerY(Layer layer) {
    int maxLayerY = layer.getMaster().getAbsY() + layer.getMaster().getHeight();
    int maxChildY = layer.getChildren()
        .stream()
        .mapToInt(RendererUtil::findMaxLayerY)
        .max()
        .orElse(0);
    return Math.max(maxChildY, maxLayerY);
} 

private static float convertToMillimeters(float pixels) {
    final float PDF_DOTS_PER_PIXEL = 20.0f;
    final float MM_PER_INCH = 25.4f;
    final int PIXELS_PER_INCH = 96;
    return (pixels / PDF_DOTS_PER_PIXEL) * MM_PER_INCH / PIXELS_PER_INCH;
}

问题示意图 #

问题原因分析 #

原方案在布局时使用了openhtmltopdf默认页面高度，当内容超过默认页高时会自动分页，此时遍历Layer计算的最大Y值会包含分页后各页的空白区域，导致最终设置的页高远大于实际内容高度，出现底部空白。

修正方案 #

核心思路 #

先设置临时超大页高让内容在单页完成布局，再获取真实内容高度，最后用该高度生成目标PDF。同时修正像素到毫米的转换逻辑，匹配openhtmltopdf的DPI规则。

修正后的Java代码 #

private static void createPdfForPrinting(OutputStream outputStream, Document document)
throws IOException {
    PdfRendererBuilder tempBuilder = new PdfRendererBuilder();
    
    // 设置临时超大页高，确保所有内容在单页布局
    tempBuilder.useDefaultPageSize(80, 10000, BaseRendererBuilder.PageSizeUnits.MM);
    
    try (PdfBoxRenderer tempRenderer = tempBuilder
        .withW3cDocument(document, "/")
        .useFastMode()
        .buildPdfRenderer()) {
        
        tempRenderer.layout();
        
        // 直接获取RootBox的高度，无需遍历Layer
        float contentHeightPx = tempRenderer.getRootBox().getHeight();
        
        // 按96DPI转换像素到毫米：1英寸=25.4mm=96像素
        float pageHeightMm = (contentHeightPx / 96) * 25.4f;
        
        // 构建最终PDF，使用计算出的准确页高
        PdfRendererBuilder finalBuilder = new PdfRendererBuilder();
        finalBuilder.withW3cDocument(document, "/")
                    .useFastMode()
                    .toStream(outputStream)
                    .useDefaultPageSize(80, pageHeightMm, BaseRendererBuilder.PageSizeUnits.MM)
                    .run();
    }
}

额外优化 #

• 移除CSS中多余的page-break-inside: avoid，因为已强制单页布局，该规则无实际作用；
• 确保body元素无额外margin，避免不必要的空白。

内容的提问来源于stack exchange，提问作者Pejman