本文介紹了使用Java中的胸腺葉html模板下載pdf文件時，css樣式不可見。的處理方法，對大家解決問題具有一定的參考價值，需要的朋友們下面隨著小編來一起學習吧！
問題描述
我使用的是胸葉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();
}
}
推薦答案
您似乎正在使用飛碟以PDF格式呈現生成的百里葉模板。
這里可能有幾個問題。
首先，您需要向Fliding Source提供一個適當的XHTML文檔。對于此任務，您可以使用JTidy將呈現的Thymeleaf模板轉換為XHTML：它可能在非常復雜的HTML中不起作用，但很可能在您的用例中起作用。
JTidy有很多版本。對不起，在上一個版本的答案中，我為您提供了一個我以前使用的過時答案的引用，它可能不適用于您需要的HTML5。請使用以下依賴項，基于全新的JTidyproject：
<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，所以我認為這些問題可能會有所幫助。
遵循這些步驟，稍作調整，您應該能夠獲得類似以下PDF的內容：
如果飛碟不能滿足您的要求，請查看任何無頭瀏覽器，例如PhantomJS進行轉換。
這篇關于使用Java中的胸腺葉html模板下載pdf文件時，css樣式不可見。的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，
