英文:
iText7 - Html to PDF - Footer with page counter - How change color
问题
使用iText7 for Java，我尝试将HTML转换为PDF。我尝试更改页脚的样式，但没有成功。
我的HTML：
<!DOCTYPE html>
<html>
<head>
<style>
#header {
position: running(header);
text-align: left;
margin-top: 50pt;
margin-left: 320pt;
font-family: Garamond;
}
@page {
margin-top: 200pt;
margin-right: 30pt;
margin-bottom: 50pt;
margin-left: 30pt;
@top-right {
content: element(header);
}
@bottom-center {
content: "Page " counter(page) " of " counter(pages);
}
}
</style>
</head>
<body>
<div id="header">
Monsieur Jay LAPOISSE<br>
13 avenue de la Chance<br>
35911 Rennes
</div>
<div style="page-break-after: always;">First page</div>
<div style="page-break-after: always;">Second page</div>
<div>Last page</div>
</body>
</html>
我的Java代码：
try {
HtmlConverter.convertToPdf(new FileInputStream(new File(SRC)), new FileOutputStream(new File(DEST)));
} catch(Exception e) {
e.printStackTrace(System.err);
}
我的目标：
如果我尝试像处理页眉那样处理页脚，我无法得到页面计数器。
如果我按照上面的代码处理，我无法应用样式。
英文:
Using iText7 for Java, I try to convert a HTML into PDF.
I try to change the style of my footer, without success.
My HTML :
<html>
<head>
<style>
#header {
position: running(header);
text-align: left;
margin-top: 50pt;
margin-left: 320pt;
font-family: Garamond;
}
@page {
margin-top: 200pt;
margin-right: 30pt;
margin-bottom: 50pt;
margin-left: 30pt;
@top-right {
content: element(header);
}
@bottom-center {
content: "Page " counter(page) " of " counter(pages);
}
}
</style>
</head>
<body>
<div id="header">
Monsieur Jay LAPOISSE<br>
13 avenue de la Chance<br>
35911 Rennes
</div>
<div style="page-break-after: always;">First page</div>
<div style="page-break-after: always;">Second page</div>
<div>Last page</div>
</body>
</html>
My Java
try {
HtmlConverter.convertToPdf(new FileInputStream(new File(SRC)), new FileOutputStream(new File(DEST)));
} catch(Exception e) {
e.printStackTrace(System.err);
}
My goal:
If I try to do as for the header, I don't arrive to have the page counter.
And if I do as my code above, I don't arrive to affect a style.
答案1
得分: 2
CSS共有16个页面边距区域，您可以在其中放置内容。您可以使用以下CSS代码轻松地在这些区域中实现您的用例：
@bottom-right {
color: red;
content: "Page " counter(page) " of " counter(pages);
}
@bottom-left {
color: red;
content: "[document title]";
}
完整的HTML：
<html>
<head>
<style>
#header {
position: running(header);
text-align: left;
margin-top: 50pt;
margin-left: 320pt;
font-family: Garamond;
}
@page {
margin-top: 200pt;
margin-right: 30pt;
margin-bottom: 50pt;
margin-left: 30pt;
@top-right {
content: element(header);
}
@bottom-right {
color: red;
content: "Page " counter(page) " of " counter(pages);
}
@bottom-left {
color: red;
content: "[document title]";
}
}
</style>
</head>
<body>
<div id="header">
Monsieur Jay LAPOISSE<br>
13 avenue de la Chance<br>
35911 Rennes
</div>
<div style="page-break-after: always;">First page</div>
<div style="page-break-after: always;">Second page</div>
<div>Last page</div>
</body>
</html>
使用pdfHTML 3.0.1转换为PDF后的可视结果：
英文:
CSS has 16 page margin areas in total where you can put your content. Your use case can be achieved by using those areas easily with the following CSS code:
@bottom-right {
color: red;
content: "Page " counter(page) " of " counter(pages);
}
@bottom-left {
color: red;
content: "[document title]";
}
Full HTML:
<html>
<head>
<style>
#header {
position: running(header);
text-align: left;
margin-top: 50pt;
margin-left: 320pt;
font-family: Garamond;
}
@page {
margin-top: 200pt;
margin-right: 30pt;
margin-bottom: 50pt;
margin-left: 30pt;
@top-right {
content: element(header);
}
@bottom-right {
color: red;
content: "Page " counter(page) " of " counter(pages);
}
@bottom-left {
color: red;
content: "[document title]";
}
}
</style>
</head>
<body>
<div id="header">
Monsieur Jay LAPOISSE<br>
13 avenue de la Chance<br>
35911 Rennes
</div>
<div style="page-break-after: always;">First page</div>
<div style="page-break-after: always;">Second page</div>
<div>Last page</div>
</body>
</html>
Visual result after converting to PDF with pdfHTML 3.0.1:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论