Java导出html（freemarker）

最新推荐文章于 2024-08-31 16:15:41 发布

小猜忌

最新推荐文章于 2024-08-31 16:15:41 发布

阅读量798

点赞数 13

文章标签： java html windows

本文链接：https://blog.csdn.net/weixin_44938648/article/details/135815802

版权

本文介绍了如何在Java项目中利用Freemarker模板引擎来生成HTML文件，包括添加依赖、设置模板路径、创建数据模型，并展示了实际的代码片段和模版代码，展示了动态数据填充到HTML结构的过程。

摘要由CSDN通过智能技术生成

如何用java生成html文件采用freemarker生成静态模版

先贴效果图

在这里插入图片描述

添加依赖

<dependencies>
    <dependency>
        <groupId>org.freemarker</groupId>
        <artifactId>freemarker</artifactId>
        <version>2.3.28</version>
    </dependency>
    <dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.11.0</version>
    </dependency>
</dependencies>

一.业务代码

       cfg.setDirectoryForTemplateLoading(new File("/Users/**/csdn"))改为自己模版的路径

      Template template = cfg.getTemplate("HtmlTemplate.ftl");模版名称后缀不要改

 public static void main(String[] args) {
        // 创建FreeMarker配置实例
        Configuration cfg = new Configuration(Configuration.VERSION_2_3_28);
        try {
            // 设置模板文件所在目录
            cfg.setDirectoryForTemplateLoading(new File("/Users/**/csdn"));
            // 获取模板文件
            Template template = cfg.getTemplate("HtmlTemplate.ftl");
            // 创建数据模型
            Map<String, Object> dataModel = new HashMap<>();
            dataModel.put("title", "后厨产品记录");
            dataModel.put("time", "2021年3季度");
            dataModel.put("zbNum", "1");
            dataModel.put("gaishan", "黄瓜，西红柿");
            dataModel.put("gaishanNum", "2");
            dataModel.put("ehua", "萝卜，白菜");
            dataModel.put("ehuaNum", "2");
            dataModel.put("chipin", "土豆");
            dataModel.put("chipinNum", "1");
            liebiao l = new liebiao();
            l.setId("1");
            l.setZbmc("黄瓜");
            l.setBm("后厨部");
            l.setBq("55.79%");
            l.setJztjrq("2023-09-30");
            l.setPl("周");
            l.setSq("54.91%");
            l.setHb("1.6%");
            l.setHbState("1");
            l.setQntq("49.70");
            l.setTb("12.25%");
            List<liebiao> list = new ArrayList<>();
            list.add(l);
            list.add(l);
            dataModel.put("q", list);
            // 将数据模型传递给模板并渲染
            Writer out = new FileWriter("/Users/leo/Desktop/csdn/output.html");
            template.process(dataModel, out);
            // 关闭资源
            out.close();
        } catch (IOException | TemplateException e) {
            e.printStackTrace();
        }
    }

}

@Data
class detials {
    private String bt;
    private List<detailItem> item;
}

@Data
class detailItem {
    private String id;
    private String zbmc;
    private String zbz;
    private String jztjrq;
}

二.模版代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${title}</title>

    <!-- <link href="style/css.css" rel="stylesheet"> -->
    <style>
        @charset "UTF-8";

        * {
            padding: 0 0;
            margin: 0 0;
        }

        body {
            font-size: 18px;
            font-family: "微软雅黑";
            color: #303030;
        }

        img {
            border: none;
        }

        p,
        ul {
            padding: 0;
            margin: 0 0;
        }

        ul li {
            list-style: none;
        }

        a {
            color: #4d4d4d;
            text-decoration: none;
        }

        h1,
        h2,
        h3,
        h4 {
            font-weight: normal;
        }

        .mainbox {
            width: 1200px;
            margin: 50px auto 0 auto;
        }

        .mainbox h2,
        .winContent h2 {
            margin: 0px auto;
            font-size: 36px;
            line-height: 2em;
            text-align: center;
            position: relative;
        }

        .responsive {
            margin: 25px 0 0 0;
        }

        .mainbox table,
        .winContent table {
            border-collapse: collapse;
            border-top: 0 !important;
            width: 100%;
        }

        .mainbox table th,
        .winContent table th {
            color: #fff;
            height: 75px;
            min-width: 60px;
            max-width: 120px;
            white-space: nowrap;
            border: none;
            border-radius: 10px 10px 0px 0px;
        }

        .mainbox table th,
        .mainbox table td,
        .winContent table th,
        .winContent table td {
            text-align: center;
            font-size: 16px;
            line-height: 30px;
            background: #fff;
        }

        .mainbox .red,
        .winContent .red {
            color: #e40202;
        }

        .mainbox .green,
        .winContent .green {
            color: #227405;
        }

        .mainbox tr:nth-child(2n+1) td,
        .winContent tr:nth-child(2n+1) td {
            background: #f1f1f1;
        }

        .mainbox table td,
        .winContent table td {
            border: 1px #e9edf1 solid;
            border-right: 1px #d1d1d1 solid;
        }

        .gou {
            display: inline-block;
            width: 22px;
            height: 22px;
            background: url(../images/gou.gif);
        }

        .mainbox .blue,
        .winContent .blue {
            color: #0c4ef4;
        }

        /* 弹框  */
        .winContent {
            position: fixed;
            z-index: 99;
            left: 0;
            top: 0;
            background-color: transparent;
            width: 100%;
            height: 100%;
            overflow: auto;
            display: none;
        }

        .winTitle {
            background-color: #fff;
            margin: 0 auto;
            margin-top: 7.5rem
                /* 600/80 */
            ;
            width: 80%;
            max-height: 80%;
            border: 1px solid #000;
            /* height: 70%; */
            position: relative;
            overflow: auto;
            padding: 0 1rem 1rem 1rem;
        }

        .topText {
            width: 100%;
            height: 2.375rem;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            line-height: 2.375rem;
        }

        .topText span {
            flex: 1;
        }

        .topText span:first-child {
            margin-left: 1rem
                /* 80/80 */
            ;
        }

        .topText span:last-child {
            margin-right: 1rem
                /* 80/80 */
            ;
            text-align: right;
        }

        .topText span:last-child span {
            cursor: pointer;
        }

        .winTitle .responsive {
            margin-top: 2.375rem;

        }
    </style>

</head>

<body>

    <div class="mainbox">
        <h2>${title}</h2>
        <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${time}，${zbNum}项指标中， <span
            class="green">${gaishan}</span>
        共${gaishanNum}项指标环比有所改善， <span class="red">${ehua}</span>共${ehuaNum}项指标环比有所恶化，<span class="blue">${chipin}</span>共${chipinNum}项指标环比持平。</h4>
        <div class="responsive">
            <!-- <h6 style="color: #e40202;text-align: right;padding-bottom: 10px;">(注：绿色表示改善，红色表示恶化)</h6> -->
            <table>
                <tbody>
                    <tr>
                        <th style="background:#e4644a;border-right:2px solid #fff;">行次</th>
                        <th style="background:#e4644a;border-right:2px solid #fff;">名称</th>
                        <th style="background:#e4644a;border-right:2px solid #fff;">部门</th>
                        <th style="background:#e4644a;border-right:2px solid #fff;">合格率</th>
                        <th style="background:#e4644a;border-right:2px solid #fff;">统计日期</th>
                        <th style="background:#35c6f0;border-right:2px solid #fff;">频率</th>

                        <th style="background:#e4644a;border-right:2px solid #fff;">上期</th>
                        <th style="background:#e4644a;border-right:2px solid #fff;">环比</th>

                        <th style="background:#e4644a;border-right:2px solid #fff;">同期</th>
                        <th style="background:#35c6f0;border-right:2px solid #fff;">同比</th>

                    </tr>
                    <! --第一条 -->
                    <#list q as l> 
                    <tr>
                        <td>1</td>
                        <td>黄瓜</td>
                        <td>后厨部</td>
                        <td>55%</td>
                        <td>2023-09-30</td>
                        <td>周</td>

                        <td>5.91%</td>
                        <td class="green">1.6%</td>
                        
                        <td>49.70%</td>
                        <td class="green">1.25%</td>
                        
                        <!-- <td class="blue" onclick="titleClick('show1')">详情</td> -->
                    </tr>
                    </#list>
             
    <script>
        function titleClick(id) {
            console.log("id", id)
            document.getElementById(id).style.display = 'block';
        }
        function isNo(id) {
            document.getElementById(id).style.display = 'none';
        }

    </script>
</body>

</html>