在java中使用thymeleaf html模板下载pdf文件时css样式不可见
Posted
技术标签:
【中文标题】在java中使用thymeleaf html模板下载pdf文件时css样式不可见【英文标题】：css styles is not visible when downloading the pdf file using thymleaf html template in java 【发布时间】：2021-02-08 10:50:58 【问题描述】：我正在使用 thymleaf html 模板。当我预览页面时，样式看起来不错。当我下载 pdf 时，我没有看到应用了任何 CSS 样式。 pdf 仅包含内容而不是我应用的样式。
//下载生成代码
我引用并使用相同的PDF生成代码link
// 示例代码
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Profile Preview</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.4.1/paper.css"></link>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"></link>
<style>
@page size: A4
table
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
td, th
border: 1px solid #dddddd;
text-align: left;
padding: 5px;
tr:nth-child(even)
background-color: #dddddd
</style>
</head>
<body class="A4">
<div class ="preview">
<section class="sheet">
<div class="logo">
<img th:src="@/images/logo.png" />
</div>
<h4 style="font-size: 1em; font-weight: bold; line-height: 1em">
<p>Age: <span th:text="$profile.basicInfo.age"></span></p>
<p>D.O.B: <span th:text="$profile.basicInfo.birthDate"></span></p>
<p>Gender: <span th:text="$profile.basicInfo.gender.toString()"></span></p>
<p>Education: <span th:text="$profile.professionalInfo.educationDetail"></span></p>
</h4>
<table>
<tr>
<th colspan="4" style="text-align:center; background-color: #6c3c81; color:white; font-weight: bold">Partner Preference Information</th>
</tr>
</table>
</div>
</section>
</div>
<button class="button" onClick="window.print();this.style.display='none'">Print</button>
</body>
</html>
//服务器端代码
GetMapping("/id/download")
public void download(@PathVariable("id") String id, HttpServletResponse response)
try
Path file = Paths.get(profilePdfService.generatePdf(id).getAbsolutePath());
if (Files.exists(file))
response.setContentType("application/pdf");
response.addHeader("Content-Disposition", "attachment; filename=" + file.getFileName());
Files.copy(file, response.getOutputStream());
response.getOutputStream().flush();
catch (Exception ex)
ex.printStackTrace();
【问题讨论】：
CSS 与 PDF 无关。你需要发布更多信息和代码来展示你在做什么。 @RoToRa 更新代码。参考上面 【参考方案1】：您似乎正在使用 Flying Saucer 以 PDF 格式呈现生成的 Thymeleaf 模板 HTML。
这里可能有几个问题。
首先，您需要向 Flying Source 提供适当的 XHTML 文档。对于此任务，您可以使用 JTidy 将渲染的 Thymeleaf 模板转换为 XHTML：它可能不适用于非常复杂的 HTML，但很可能在您的用例中。
JTidy 有很多版本。抱歉，在之前版本的答案中，我为您提供了对我之前使用的过时版本的参考，这可能不适用于您需要的 HTML5。请改用以下依赖项，基于全新的 JTidy project：
<dependency>
<groupId>com.github.jtidy</groupId>
<artifactId>jtidy</artifactId>
<version>1.0.2</version>
</dependency>
比如你在问题中指出的PdfService类的源码中，修改generatePdf方法如下：
public File generatePdf() throws IOException, DocumentException
Context context = getContext();
String html = loadAndFillTemplate(context);
String xhtml = convertToXhtml(html);
return renderPdf(xhtml);
convertToXhtml 的样子（是以前版本的更新版本，适用于新的 JTidy 库版本）：
// Necessary imports, among others
import org.w3c.dom.Document;
import org.w3c.tidy.Tidy;
//...
private String convertToXhtml(String html) throws UnsupportedEncodingException
Tidy tidy = new Tidy();
tidy.setXHTML(true);
tidy.setIndentContent(true);
tidy.setPrintBodyOnly(true);
tidy.setInputEncoding("UTF-8");
tidy.setOutputEncoding("UTF-8");
tidy.setSmartIndent(true);
tidy.setShowWarnings(false);
tidy.setQuiet(true);
tidy.setTidyMark(false);
Document htmlDOM = tidy.parseDOM(new ByteArrayInputStream(html.getBytes()), null);
OutputStream out = new ByteArrayOutputStream();
tidy.pprint(htmlDOM, out);
return out.toString();
查看执行此过程后页面的外观：您应用了很多内联样式，PDF 应该看起来更好。
此外，不要使用外部 CDN 分布式样式表，而是使用它们的本地副本，作为 PdfService 类的源代码中标识为 PDF_RESOURCES 的资源可供您的应用程序访问。
正如您在该类的renderPdf 的implementation 中看到的那样，它被用作查找页面中引用的不同资源的基本 URL。
最后，请注意您的徽标：也许您需要为此目的提供一些 ReplacedElementFactory 的自定义实现。请考虑阅读this 或this other SO 问题，我认为它们会有所帮助。
按照这些步骤，稍作调整，您应该能够获得类似于以下 PDF 的内容：
如果飞碟不能满足您的要求，请查看任何无头浏览器，例如PhantomJS，以执行转换。
【讨论】：
我在您的代码上方尝试过，但仍然面临同样的问题 我很遗憾听到这个消息，它应该有效的。你有什么错误吗？您是否尝试对信息的打印方式进行任何改进？请问，您如何实际将文档打印为PDF？在您的代码中，我只能看到window.print()，但没有提及操作中涉及的任何服务器端代码。我假设您对应用程序的服务器端执行某种 HTTP 调用。
这行显示错误 org.xml.sax.SAXParseException: Premature end of file。但我已经检查了 html 的结尾，它工作正常。布局工作正常预览页面，但在下载 pdf 和打印视图中错过了 css。即使我在单独点击下载界面时也会出错。
嗨@selvi。这么晚才回复很抱歉。非常感谢您更新问题。很遗憾听到您在处理 HTML 时遇到问题，我想，在尝试整理 HTML 时。我用更新的库版本更新了答案。拜托，你能再试一次，看看错误消失了吗？谢谢，给您带来的不便敬请谅解。
嗨@selvi。请查看更新后的答案。以上是关于在java中使用thymeleaf html模板下载pdf文件时css样式不可见的主要内容，如果未能解决你的问题，请参考以下文章
spring boot集成模板引擎Thymeleaf中遇到的坑