百里香叶 html 模板不尊重类和样式-解网

问：

在以下尝试构建简历的百里香叶模板上，我在标签上应用了带有样式的类，但百里香叶只是忽略了它。例如，类 pagina、侧边栏、个人数据和 dados-gerais，它们被认为是一个柔性显示器，每侧一个，但它们是 setas 列，有人可以帮忙吗？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Meu Currículo</title>
    <style type="text/css">
        body,
        html {
            font-family: Arial, sans-serif;
            height: 100vh;
            margin: 0;
            padding: 0;
        }

        .personal-data {
            margin-bottom: 20px;
            margin-top: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30px;
        }

        .personal-data label {
            font-weight: bold;
        }

        .personal-data p {
            margin: 5px 0;
        }

        .imagem {
            width: 80px;
            height: 95px;
            margin-right: 10px;
            margin-bottom: 10px;
            float: left;
        }

        .personal-data-content {
            display: flex;
            align-items: center;
        }

        .section {
            clear: both;
        }

        .sidebar {
            display: flex;
            flex-direction: column;
        }

        .pagina {
            display: flex;
            flex-direction: row;
        }

        .dados-gerais {
            margin-left: 30px;
        }
    </style>
</head>

<body>
<div class="pagina">
    <div class="sidebar" th:style="'background-color: ' + ${ctr.getCorCurriculo()}">
        <div class="personal-data-content">
            <div class="personal-data" style="display: flex">
                <div>
                    <img th:src="${foto}" class="imagem"/>
                </div>
                <div class="dados-gerais">
                    <p th:style="'color: ' + ${ctr.getCorDadosPessoaisCurriculo()}">
                        <strong>Localização:</strong><span th:text="${localizacao}"/>
                    </p>
                    <p th:style="'color: ' + ${ctr.getCorDadosPessoaisCurriculo()}">
                        <strong>Telefone:</strong><span th:text="${telefone}"/>
                    </p>
                    <p th:style="'color: ' + ${ctr.getCorDadosPessoaisCurriculo()}">
                        <strong>Email:</strong><span th:text="${email}"/>
                    </p>
                </div>
            </div>
        </div>
    </div>

        <div style="margin-top: 20px">
            <div class="dados-gerais">
                <h1 th:text="${nome}"></h1>
                <div th:each="campo: ${campos}" class="section">
                    <h2 th:class="section-title" th:style="'color: ' + ${ctr.getCorOutrosDadosCurriculo()}"
                        th:text="${campo.key}"></h2>
                    <div th:utext="${#strings.replace(campo.getValue(), '\n', '<br/>')}" th:class="section-content"
                         th:style="'color: ' + ${ctr.getCorOutrosDadosCurriculo()}" th:text="${campo.getValue()}"></div>
                </div>

            </div>
        </div>

</div>
</body>
</html>

尝试使用 th：class 尝试重建 html 文件。我确实在浏览器上的 .html 文件上使用了 sme html，它运行良好。

我以这种方式创建 .pdf 文件：

Context context = new Context();

        context.clearVariables();
        templateEngine.clearTemplateCache();

        context.setVariable("nome", fixos.get("nome"));
        context.setVariable("foto", fixos.get("foto"));
        context.setVariable("localizacao", fixos.get("localizacao"));
        context.setVariable("telefone", fixos.get("telefone"));
        context.setVariable("email", fixos.get("email"));
        context.setVariable("ctr", ctr);
        context.setVariable("fixos", fixos);
        context.setVariable("campos", campos);


        String template = templateEngine.process("curriculo/curriculo2", context);
        byte[] retorno = ThymeleafUtils.generatePdf(template);

        context.clearVariables();
        templateEngine.clearTemplateCache();

        String base64 = Base64.getEncoder().encodeToString(retorno);
        return amazonS3Service.uploadBase64 (base64, "curriculo-"+tr.getCidadao().getNome() + LocalDateTime.now() +".pdf", "application/pdf");

public static byte[] generatePdf(String template) throws IOException, DocumentException {
        try (ByteArrayOutputStream out = new ByteArrayOutputStream()) {
            ITextRenderer renderer = new ITextRenderer();

            String xHtml = convertToXhtml(template);

            String baseUrl = FileSystems
                    .getDefault()
                    .getPath("src", "test", "resources")
                    .toUri()
                    .toURL()
                    .toString();
            renderer.setDocumentFromString(xHtml, baseUrl);
            renderer.layout();
            renderer.createPDF(out);

            return out.toByteArray();
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

Java HTML Spring 模板百里香叶

答： 暂无答案

上一个：在 Android Studio 中找不到基本活动模板

下一个：HTML 模板的 Thymleaf 转义报价

百里香叶 html 模板不尊重类和样式

Thymeleaf html template do not respect the classes and styles

评论