CSS 背景 属性 无法使用 java 在 pdfHTML iText7 中工作
CSS Background property not working in pdfHTML iText7 using java
我正在尝试借助 iText 的方法将 html 转换为 pdf
HtmlConverter.convertToPdf(htmlString, pdfDocument, converterProp);
但似乎此服务不遵守 html 中定义的 css 属性。
这是我的 html 字符串
String html = "<html>"
+ "<head>"
+ "<style>"
+ "* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}"
+ ".ng-hide {display: none !important;}"
+ "label { font-weight: normal; }"
+ "table { border-spacing: 0;border-collapse: collapse;}"
+ "td, th { padding: 0; }"
+ "@font-face { font-family: Muli; src: url(../fonts/Muli.woff2); }"
+ "body { font-family: 'Muli', sans-serif!important; margin: 0;padding: 0; }"
+ ".font-muli { font-family: Muli !important; }"
+ "</style>"
+ "</head>"
+ "<body>"
+ "<div>"
+ "<div class='font-muli'>"
+ "<div style='height: 0.69in; padding: 11px 16px; line-height: 0.49in; display: flex; font-size: 20pt;'>"
+ "<div>"
+ "<img style='float: left; height: 45px; margin-right: 11px;vertical-align: middle;' src='icon.png'>"
+ "<label title='abc' class='it pull-left' style='font-style: italic;float: left;max-width: 3.6in; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;'>abc</label>"
+ "</div>"
+ "<div style='font-size: 10pt;margin: auto;max-width: 12in;'>"
+ "<table style='width: 7.5in;'>"
+ "<tbody><tr>"
+ "<td>"
+ "<div style='text-align: center; display: grid;'>"
+ "<label class='' style='font-style: italic;float: left;line-height: 1.0;margin: 0;font-size: 20pt;'>1</label>"
+ "<label style='float: left;clear: both;line-height: 1;margin: 0 0px;text-transform: capitalize;'>abc</label>"
+ "</div>"
+ "</td>"
+ "<td>"
+ "<div style='text-align: center; display: grid;'>"
+ "<label style='font-style: italic;float: left;line-height: 1.0;margin: 0;font-size: 20pt;' class=''>2</label>"
+ "<label style='float: left;clear: both;line-height: 1;margin: 0 0px;text-transform: capitalize;' class=''>efg</label>"
+ "</div>"
+ "</td>"
+ "<td>"
+ "<div style='text-align: center; display: grid;'>"
+ "<label style='font-style: italic;float: left;line-height: 1.0;margin: 0;font-size: 20pt;'>3</label>"
+ "<label style='float: left;clear: both;line-height: 1;margin: 0 0px;text-transform: capitalize;'>jkl</label>"
+ "</div>"
+ "</td>"
+ "<td>"
+ "<div style='text-align: center; display: grid;'>"
+ "<label style='font-style: italic;float: left;line-height: 1.0;margin: 0;font-size: 20pt;'>4</label>"
+ "<label style='float: left;clear: both;line-height: 1;margin: 0 0px;text-transform: capitalize;'>afqw</label>"
+ "</div>"
+ "</td>"
+ "<td>"
+ "<div style='text-align: center; display: grid;'>"
+ "<label style='font-style: italic;float: left;line-height: 1.0;margin: 0;font-size: 20pt;'>5</label>"
+ "<label style='float: left;clear: both;line-height: 1;margin: 0 0px;text-transform: capitalize;'>qw</label>"
+ "</div>"
+ "</td>"
+ "</tr>"
+ "</tbody></table>"
+ "</div>"
+ "</div>"
+ "<div style='background: url(../imgs/large.png) no-repeat; height: 0.12in; background-position: 0 0px; background-repeat-x: repeat;' class='mainHeaderSeparation'></div>"
+ "</div>"
+ "</div>"
+ "</body>"
}
我在这里将其转换为 pdf
LicenseKey.loadLicenseFile(LICENSE);
PdfWriter writer = new PdfWriter(destination_file);
PdfDocument pdf = new PdfDocument(writer);
pdf.addNewPage(PageSize.A2);
ConverterProperties prop = new ConverterProperties();
HtmlConverter.convertToPdf(html, pdf, prop);
但是pdf没有带重复x的背景图。如果我做错了什么,请帮帮我?或缺少任何步骤。
任何 help/suggestion 将不胜感激。
注意:图像 url 路径没有问题,我看到图像但没有 x 重复模式。
谢谢。
使用属性 background-image
而不是 background
<div style="background-image: url(../imgs/large.png)...
CSS 语法: <div style="background-image:url(bgimage.jpg)">
我正在尝试借助 iText 的方法将 html 转换为 pdf
HtmlConverter.convertToPdf(htmlString, pdfDocument, converterProp);
但似乎此服务不遵守 html 中定义的 css 属性。
这是我的 html 字符串
String html = "<html>"
+ "<head>"
+ "<style>"
+ "* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}"
+ ".ng-hide {display: none !important;}"
+ "label { font-weight: normal; }"
+ "table { border-spacing: 0;border-collapse: collapse;}"
+ "td, th { padding: 0; }"
+ "@font-face { font-family: Muli; src: url(../fonts/Muli.woff2); }"
+ "body { font-family: 'Muli', sans-serif!important; margin: 0;padding: 0; }"
+ ".font-muli { font-family: Muli !important; }"
+ "</style>"
+ "</head>"
+ "<body>"
+ "<div>"
+ "<div class='font-muli'>"
+ "<div style='height: 0.69in; padding: 11px 16px; line-height: 0.49in; display: flex; font-size: 20pt;'>"
+ "<div>"
+ "<img style='float: left; height: 45px; margin-right: 11px;vertical-align: middle;' src='icon.png'>"
+ "<label title='abc' class='it pull-left' style='font-style: italic;float: left;max-width: 3.6in; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;'>abc</label>"
+ "</div>"
+ "<div style='font-size: 10pt;margin: auto;max-width: 12in;'>"
+ "<table style='width: 7.5in;'>"
+ "<tbody><tr>"
+ "<td>"
+ "<div style='text-align: center; display: grid;'>"
+ "<label class='' style='font-style: italic;float: left;line-height: 1.0;margin: 0;font-size: 20pt;'>1</label>"
+ "<label style='float: left;clear: both;line-height: 1;margin: 0 0px;text-transform: capitalize;'>abc</label>"
+ "</div>"
+ "</td>"
+ "<td>"
+ "<div style='text-align: center; display: grid;'>"
+ "<label style='font-style: italic;float: left;line-height: 1.0;margin: 0;font-size: 20pt;' class=''>2</label>"
+ "<label style='float: left;clear: both;line-height: 1;margin: 0 0px;text-transform: capitalize;' class=''>efg</label>"
+ "</div>"
+ "</td>"
+ "<td>"
+ "<div style='text-align: center; display: grid;'>"
+ "<label style='font-style: italic;float: left;line-height: 1.0;margin: 0;font-size: 20pt;'>3</label>"
+ "<label style='float: left;clear: both;line-height: 1;margin: 0 0px;text-transform: capitalize;'>jkl</label>"
+ "</div>"
+ "</td>"
+ "<td>"
+ "<div style='text-align: center; display: grid;'>"
+ "<label style='font-style: italic;float: left;line-height: 1.0;margin: 0;font-size: 20pt;'>4</label>"
+ "<label style='float: left;clear: both;line-height: 1;margin: 0 0px;text-transform: capitalize;'>afqw</label>"
+ "</div>"
+ "</td>"
+ "<td>"
+ "<div style='text-align: center; display: grid;'>"
+ "<label style='font-style: italic;float: left;line-height: 1.0;margin: 0;font-size: 20pt;'>5</label>"
+ "<label style='float: left;clear: both;line-height: 1;margin: 0 0px;text-transform: capitalize;'>qw</label>"
+ "</div>"
+ "</td>"
+ "</tr>"
+ "</tbody></table>"
+ "</div>"
+ "</div>"
+ "<div style='background: url(../imgs/large.png) no-repeat; height: 0.12in; background-position: 0 0px; background-repeat-x: repeat;' class='mainHeaderSeparation'></div>"
+ "</div>"
+ "</div>"
+ "</body>"
}
我在这里将其转换为 pdf
LicenseKey.loadLicenseFile(LICENSE);
PdfWriter writer = new PdfWriter(destination_file);
PdfDocument pdf = new PdfDocument(writer);
pdf.addNewPage(PageSize.A2);
ConverterProperties prop = new ConverterProperties();
HtmlConverter.convertToPdf(html, pdf, prop);
但是pdf没有带重复x的背景图。如果我做错了什么,请帮帮我?或缺少任何步骤。 任何 help/suggestion 将不胜感激。
注意:图像 url 路径没有问题,我看到图像但没有 x 重复模式。 谢谢。
使用属性 background-image
而不是 background
<div style="background-image: url(../imgs/large.png)...
CSS 语法: <div style="background-image:url(bgimage.jpg)">