Unwanted extra space in PDF page while converting HTML to PDF using pd4ml in java

Question

In my existing project, I'm trying to convert HTML content to PDF using PD4ML version-3. I'm facing some padding issue in the PDF page while I'm setting some custom size for the PDF page size.

Please find the below java code to convert HTML to PDF

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)); // here I'm providing some custom size, which is similar to my HTML width and height
    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);
    }
}

Note : here String content in method paramenter is my HTML content which is below

<!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>

The problem here is, I can able to covert it PDF page, but I could see some extra white space around the content. I didn't set any page Insets for this. and also I could see the second page slightly moved in first page.

I tried lot of ways to resolve this issue, but no luck. Please help me to resolve this issue. Thanks in advance.

Please find the below PDF pages (I have attached it as Image here). You could see space around the background image. Its not because of background image. I'm facing this issue even I set border to that HTML content.

K J · Accepted Answer · 2023-07-13T23:11:36.970

PD4ML uses HTML and CSS (Cascading Style Sheets) as page layout and content definition format.

The current default modern gripper margin is usually 8 and that seems to be what you have as the issue trying to get borderless.

There are at least two solutions,

simply set the CSS in the HTML string to <body style="margin: 0px;"> like this, or see alternative later

<!DOCTYPE html><html><head><meta charset="utf-8"></head><body style="margin: 0px;"><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>

But perhaps better for future

you use the master margin configuration after set page size,
however that may need version 4 not PD4ML version-3 which you especially asked.

...
 html.setPageSize(new Dimension(288, 216)); // here I'm providing some custom size, which is similar to my HTML width and height
   
// reset page margins for the 1st and following pages
 html.setPageMargins(new PageMargins(0, 0, 0, 0), "1+");

Here Before on A4

Here After by also include in body or head with page size which works in browser
<head><meta charset="utf-8"><style>@media print {@page {margin:0; size:288px 216px;}}</style></head><body>

Unwanted extra space in PDF page while converting HTML to PDF using pd4ml in java

1 Answers1