使用PD4ML v3转换HTML到PDF时自定义页面存在多余空白问题

我在现有项目中使用PD4ML version-3将HTML内容转换为PDF，设置自定义PDF页面尺寸时，遇到两个问题：页面存在多余空白，且第二页内容偏移。已将页面边距设为0，但问题仍未解决。

用于HTML转PDF的Java代码 #

import org.zefer.pd4ml.PD4Constants;
import org.zefer.pd4ml.PD4ML;

public void generateCustomSizeBadge(String content, OutputStream out) throws IOException, BadgeGenerationException {
    // Generate PDF Badge with custom size
    PD4ML html = new PD4ML();
    
    html.setPageSize(new Dimension(288, 216)); // 设置自定义尺寸，与HTML宽高相近
    html.setHtmlWidth(288);
    html.adjustHtmlWidth();

    html.setPageInsets(new Insets(0,0, 0, 0));
    html.enableImgSplit(false);
    html.useTTF("java:", true);
    html.setDefaultTTFs("Times New Roman", "Arial", "Courier New");

    Map<String, String> m = new HashMap<>();
    m.put(PD4Constants.PD4ML_CACHE_IMAGES_IN_TMP_DIR, "true");
    m.put(PD4Constants.PD4ML_ABSOLUTE_ADDRESS_SPACE, "document");
    html.setDynamicParams(m);

    html.protectPhysicalUnitDimensions();

    try (StringReader sr = new StringReader(content)) {
        html.render(sr, out);
    }
}

转换所用HTML内容 #

方法参数content对应的HTML代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="frontBadgeHeader" style="color: white; position: relative;width:288px;">
    <div id="frontBadge" style="width: 288px; height: 216px; background: url(&quot;http://localhost/ERImg/04/12/15/blue_Bg.jpg&quot;) left top / cover no-repeat; z-index: 1;background-size: cover !important"></div>
    <div id="e8d56a50-2143-11ee-ae2a-893d4c6518ac" style="color: rgb(0, 0, 0);font-family: Arial;font-size:16pt;height: 32px;left: 20px;position: absolute;top: 98px;width: 200px;z-index: 10">Very Long First name</div>
</div>
<div id="backBadgeHeader" style="color: white; position: relative;width:288px;">
    <div id="backBadge" style="width: 288px; height: 216px; background: url(&quot;http://localhost/ERImg/04/12/15/Brown_BG.jpg&quot;) left top / cover no-repeat; z-index: 1;background-size: cover !important; background-position: left top"></div>
    <div id="fb995700-2143-11ee-ae2a-893d4c6518ac" style="color: rgb(0, 0, 0);font-family: Arial;font-size:13pt;height: 32px;left: 20px;position: absolute;top: 92px;width: 200px;z-index: 10">PrintBadges_Test_last_name</div>
</div>
</body>
</html>

问题截图 #

解决方案 #

针对这两个问题，可尝试以下调整：

• 统一尺寸单位：PD4ML默认用点（pt）作为单位，1px≈0.75pt。若HTML尺寸为像素，可明确指定单位修正页面尺寸：

  html.setPageSize(PD4Constants.UNIT_PIXELS, 288, 216);
  

• 消除HTML默认边距：在HTML的body标签添加style="margin:0;padding:0;"，覆盖浏览器默认空白样式。
• 强制单页适配：HTML包含两个高度216px的区块，总高度超页面高度导致分页。可在两个徽章区块间添加分页标记<div style="page-break-after:always;"></div>，确保每个徽章单独占一页；同时调整PD4ML页面高度与单个徽章高度一致：

  html.setPageHeight(216);
  

• 注释物理单位保护：若无需强制物理单位换算，可注释掉html.protectPhysicalUnitDimensions();，避免单位偏差导致的布局问题。

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