英文:
White border around my background when generating a PDF certificate from an HTML template with FlyingSaucer
问题
我需要在完成课程后生成PDF证书。这些PDF是使用Thymeleaf的HTML模板生成的。一切都通过转换进行，但结果中出现了背景图像周围的白色边框。背景图像的分辨率是1920x1440。
这是我的Spring Boot 3.1.0上的代码：
public String parseThymeleafTemplate(String verificationCode, Long certificateId) {
ClassLoaderTemplateResolver templateResolver = new ClassLoaderTemplateResolver();
templateResolver.setSuffix(".html");
templateResolver.setTemplateMode(TemplateMode.HTML);
TemplateEngine templateEngine = new SpringTemplateEngine();
templateEngine.setTemplateResolver(templateResolver);
User student = User.builder()
.surname("Test_surname").name("Test_name").build();
User mentor = User.builder()
.surname("Test_mentor").name("Test_mentor").position("Java dev").build();
Course course = Course.builder()
.mentor(mentor)
.name("Java Developer for 3 weeks").build();
}
Certificate certificate = Certificate.builder()
.id(54L)
.course(course)
.student(student)
.verificationCode(verificationCode)
.issuedDate(LocalDate.now())
.build();
Context context = new Context();
context.setVariable("company_name", "test_company");
context.setVariable("student_name", certificate.getStudent().getSurname() + " " + certificate.getStudent().getName());
context.setVariable("course_name", certificate.getCourse().getName());
context.setVariable("mentor_name", certificate.getCourse().getMentor().getSurname() + " " + certificate.getCourse().getMentor().getName());
context.setVariable("issued_date", certificate.getIssuedDate());
context.setVariable("verification_code", certificate.getVerificationCode());
String generatedFileName = this.generatePdfFromHtml(templateEngine.process("pdf_cert_temp", context),
"Java", certificate);
certificate.setFileName(generatedFileName);
return generatedFileName;
}
public String generatePdfFromHtml(String html, String courseTag, Certificate certificate) {
String fileName = courseTag + "_" +
transliterateUtil.transliterateTextFromRussianToLatin(certificate.getStudent().getName()) + "_" +
certificate.getIssuedDate().toString() + "_" + certificate.getId() +
CertStrings.CERT_EXTENSION;
String outputFolder = CertStrings.PATH_TO_PDF_CERTS + File.separator + fileName;
try (OutputStream outputStream = new FileOutputStream(outputFolder)) {
ITextRenderer renderer = new ITextRenderer();
renderer.setDocumentFromString(html);
renderer.layout();
renderer.createPDF(outputStream);
} catch (IOException e) {
throw new RuntimeException(CertStrings.ERROR_WHILE_OUTPUT_STREAM + e);
} catch (DocumentException e) {
throw a RuntimeException(CertStrings.ERROR_CREATING_PDF + e);
}
return fileName;
}
这是用于创建PDF的Thymeleaf模板：
<html xmlns:th="http://www.thymeleaf.org">
<head>
<style th:inline="text">
@page {
size: 1920px 1440px;
}
body {
font-family: Arial, sans-serif;
background-image: url(http://some_url/files/cert_templates/java_template_bg.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* 其他样式规则 */
</style>
</head>
<body>
<div>
<!-- 内容 -->
</div>
</body>
</html>
这是我的pom.xml：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>3.1.0</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>PdfGeneratorTest</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>PdfGeneratorTest</name>
<description>PdfGeneratorTest</description>
<properties>
<java.version>17</java.version>
</properties>
<dependencies>
<!-- 依赖列表 -->
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
这是生成的PDF示例：
尝试修改HTML模板，但未奏效。调整图像大小或输出页面大小也未奏效。
英文:
I need to generate PDF certificates after completing courses. These pdf's generating by HTML template with Thymeleaf. Everything is OK through converting, but in result appear white border around the background image. Resolution of Background image is 1920x1440.
There is my code on Spring Boot 3.1.0:
public String parseThymeleafTemplate(String verificationCode, Long certificateId) {
ClassLoaderTemplateResolver templateResolver = new ClassLoaderTemplateResolver();
templateResolver.setSuffix(".html");
templateResolver.setTemplateMode(TemplateMode.HTML);
TemplateEngine templateEngine = new SpringTemplateEngine();
templateEngine.setTemplateResolver(templateResolver);
User student = User.builder()
.surname("Test_surname").name("Test_name").build();
User mentor = User.builder()
.surname("Test_mentor").name("Test_mentor").position("Java dev").build();
Course course = Course.builder()
.mentor(mentor)
.name("Java Developer for 3 weeks").build();
}
Certificate certificate = Certificate.builder()
.id(54L)
.course(course)
.student(student)
.verificationCode(verificationCode)
.issuedDate(LocalDate.now())
.build();
Context context = new Context();
context.setVariable("company_name", "test_company");
context.setVariable("student_name", certificate.getStudent().getSurname() + " " + certificate.getStudent().getName());
context.setVariable("course_name", certificate.getCourse().getName());
context.setVariable("mentor_name", certificate.getCourse().getMentor().getSurname() + " " + certificate.getCourse().getMentor().getName());
context.setVariable("issued_date", certificate.getIssuedDate());
context.setVariable("verification_code", certificate.getVerificationCode());
String generatedFileName = this.generatePdfFromHtml(templateEngine.process("pdf_cert_temp", context),
"Java", certificate);
certificate.setFileName(generatedFileName);
return generatedFileName;
}
public String generatePdfFromHtml(String html, String courseTag, Certificate certificate) {
String fileName = courseTag + "_" +
transliterateUtil.transliterateTextFromRussianToLatin(certificate.getStudent().getName()) + "_" +
certificate.getIssuedDate().toString() + "_" + certificate.getId() +
CertStrings.CERT_EXTENSION;
String outputFolder = CertStrings.PATH_TO_PDF_CERTS + File.separator + fileName;
try (OutputStream outputStream = new FileOutputStream(outputFolder)) {
ITextRenderer renderer = new ITextRenderer();
renderer.setDocumentFromString(html);
renderer.layout();
renderer.createPDF(outputStream);
} catch (IOException e) {
throw new RuntimeException(CertStrings.ERROR_WHILE_OUTPUT_STREAM + e);
} catch (DocumentException e) {
throw new RuntimeException(CertStrings.ERROR_CREATING_PDF + e);
}
return fileName;
}
There is my Thymeleaf template for creating PDF
<html xmlns:th="http://www.thymeleaf.org">
<head>
<style th:inline="text">
@page {
size: 1920px 1440px;
}
body {
font-family: Arial, sans-serif;
background-image: url(http://some_url/files/cert_templates/java_template_bg.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.company-name {
text-align: center;
color: #D9AF58;
font-style: italic;
font-size: 70px;
font-weight: 100;
position: absolute;
margin-top: 5%;
left: 44%;
}
.student-name {
text-align: center;
color: #D9AF58;
font-family: "Times New Roman", Times, serif;
font-size: 70px;
font-weight: 100;
position: absolute;
margin-top: 31%;
left: 38.5%;
}
.course-completing {
text-align: center;
color: #D9AF58;
font-family: "Times New Roman", Times, serif;
font-weight: 100;
font-size: 51px;
position: absolute;
margin-top: 36%;
left: 30%;
}
.course-description {
text-align: center;
color: #D9AF58;
font-family: "Times New Roman", Times, serif;
font-size: 50px;
font-weight: 100;
position: absolute;
margin-top: 40%;
left: 35%;
}
.mentor-name {
text-align: center;
color: #D9AF58;
font-family: "Times New Roman", Times, serif;
font-size: 30px;
font-weight: 100;
position: absolute;
margin-top: 44%;
left: 39%;
}
.verification-code {
text-align: center;
color: #D9AF58;
font-size: 25px;
font-weight: 100;
position: absolute;
margin-top: 46%;
left: 34.5%;
}
.issued-date {
text-align: left;
color: #D9AF58;
font-size: 50px;
font-weight: 100;
position: absolute;
margin-top: 55%;
left: 21.1%;
}
.signature {
text-align: left;
color: #D9AF58;
font-size: 50px;
font-weight: 100;
position: absolute;
margin-top: 55%;
right: 21.5%;
}
</style>
</head>
<body>
<div>
<div class="company-name">
<span th:text="${company_name}"></span>
</div>
<div class="student-name">
<span th:text="${student_name}"></span>
</div>
<div class="course-completing">
<span>has successfully completing course</span>
</div>
<div class="course-description">
<u th:text="${course_name}"></u>
</div>
<div class="mentor-name">
Taught by <span th:text="${mentor_name}"></span>
</div>
<div class="verification-code">
Verification code: <span th:text="${verification_code}"></span>
</div>
<div>
<div class="issued-date">
<span th:text="${issued_date}"></span>
</div>
<div class="signature">
<span th:text="'Test S.'"></span>
</div>
</div>
</div>
</body>
</html>
This is my pom.xml:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>3.1.0</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>PdfGeneratorTest</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>PdfGeneratorTest</name>
<description>PdfGeneratorTest</description>
<properties>
<java.version>17</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>com.ibm.icu</groupId>
<artifactId>icu4j</artifactId>
<version>69.1</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.xhtmlrenderer</groupId>
<artifactId>flying-saucer-pdf</artifactId>
<version>9.1.22</version>
</dependency>
<dependency>
<groupId>ognl</groupId>
<artifactId>ognl</artifactId>
<version>3.2.10</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.12.0</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
This is example, what is look like:
Example of generated PDF
Tried to modify HTML tempalte, but it didn't work. Resize of image or output page also didn't work.
答案1
得分: 3
这是正常的打印行为，它只是添加了正常打印机的 "夹持边距"（以防墨水弄脏滚筒）。您需要添加CSS以减小打印机的媒体边距到 "无边框"。
一种方法是将@Media打印设置为body为零。
这可能不会精确删除所有白色区域（可能会有一两个像素的微小变化），因为通常会对比例进行一些单位舍入，这可能会因浏览器而异，并且通常依赖于当前页面的缩放。
所以这是我用于减小打印机边框的粗略值：
<head>
<style th:inline="text">
@media print {
@page {
size: 1920px 1440px;
border: 0px;
margin: 0px;
padding: 0px;
}
}
英文:
This is Normal Printing Behaviour, it is simply adding normal printer "gripper margins" (so the ink does not foul the rollers). You will need to add CSS to reduce printer Media Margins to "Borderless"
One way is to set the @Media print for the body to Zer0
This may not remove precisely all white areas (without a minor pixel or two change) since there is often some unit rounding off for scale ratios, which can vary from browser to browser, and often depend on current page scaling.
So here are the crude values I used for reducing the printer border
<head>
<style th:inline="text">
@media print {
@page {
size: 1920px 1440px;
border: 0px;
margin: 0px;
padding: 0px;
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论