英文:
Unwanted extra space in PDF page while converting HTML to PDF using pd4ml in java
问题
在我的现有项目中，我正在尝试使用PD4ML版本-3将HTML内容转换为PDF。我在设置PDF页面大小时遇到了一些填充问题。
请查看以下用于将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);
}
}
请注意：这里方法参数中的字符串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('http://localhost/ERImg/04/12/15/blue_Bg.jpg') 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('http://localhost/ERImg/04/12/15/Brown_BG.jpg') 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>
问题在于，我可以将其转换为PDF页面，但我在内容周围看到了一些额外的白色空间。我没有设置页面的Insets，而且我还注意到第二页在第一页上稍微移动了一些。
我尝试了很多方法来解决这个问题，但都没有成功。请帮助我解决这个问题。提前感谢您。
请查看以下PDF页面**（我已将其作为图像附加在此处）**。您可以看到背景图像周围的空白空间。这不是背景图像的原因。即使我为HTML内容设置了边框，我也遇到了这个问题。
英文:
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.
答案1
得分: 0
PD4ML使用HTML和CSS（层叠样式表）作为页面布局和内容定义格式。
当前默认的现代抓手边距通常为8，这似乎是您试图去掉边框的问题所在。
至少有两种解决方案，
1）只需将HTML字符串中的CSS设置为<body style="margin: 0px;">，如下所示，或者稍后查看备用方案
<!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('http://localhost/ERImg/04/12/15/blue_Bg.jpg') 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('http://localhost/ERImg/04/12/15/Brown_BG.jpg') 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>
但也许更好的是为将来考虑
2）在设置页面大小后，您可以使用主要的边距配置，然而，这可能需要版本4而不是PD4ML版本-3，这是您特别提出的。
...
html.setPageSize(new Dimension(288, 216)); // 在这里我提供了一些自定义大小，与我的HTML宽度和高度类似
// 为第1页和后续页重置页面边距
html.setPageMargins(new PageMargins(0, 0, 0, 0), "1+");
这是A4纸上<body style="margin: 0px;">之前的情况：
这是在body或head中包含页面大小的情况，适用于浏览器：
<head><meta charset="utf-8"><style>@media print {@page {margin:0; size:288px 216px;}}</style></head><body>
英文:
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 <body style="margin: 0px;"> 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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论