使用Java中的胸腺叶html模板下载pdf文件时，css样式不可见。-Java问题

css styles is not visible when downloading the pdf file using thymleaf html template in java(使用Java中的胸腺叶html模板下载pdf文件时，css样式不可见。)

本文介绍了使用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样式不可见。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！