个人中心
gpt4 book ai didi

java - 在java中使用thymeleaf html模板下载pdf文件时，css样式不可见

转载 作者：行者123 更新时间：2023-12-04 13:32:05 24 4
gpt4 key购买 nike

我正在使用 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();
        }
    }

最佳答案

您似乎正在使用 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 分布式样式表，而是使用它们的本地副本，您的应用程序可以将其作为标识为 PDF_RESOURCES 的资源进行访问。在 PdfService的源代码中类(class)。
正如您在 implementation 中看到的那样的 renderPdf在该类中，它被用作基本 URL 来查找页面中引用的不同资源。
最后，请注意您的徽标:也许您需要提供 ReplacedElementFactory 的一些自定义实现。为了这个目的。请考虑阅读 this或 this other SO 问题，我认为它们会有所帮助。
按照这些步骤，稍作调整，您应该能够获得类似于以下 PDF 的内容:
enter image description here
如果飞碟不能满足您的要求，请查看任何 headless 浏览器，例如， PhantomJS , 执行转换。

关于java - 在java中使用thymeleaf html模板下载pdf文件时，css样式不可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64532755/

24 4 0
文章推荐： c# - 如何检查特定的韩文字符是否是音节的一部分？
文章推荐： math - 如何计算具有相同感知亮度的 RGB 值
文章推荐： java - 无法编译 Artifactory 7.10.2
文章推荐： ios - 如何自定义 UICollectionView Cell 以显示如附件所示的图像网格？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com