SpringBoot集成thymeleaf渲染html模板的步骤详解
更新时间：2023年06月12日 10:28:19 作者：掉头发的王富贵
这篇文章主要给大家详细介绍了SpringBoot集成thymeleaf如何使实现html模板的渲染，文中有详细的代码示例，具有一定的参考价值,需要的朋友可以参考下
有时候我们会遇到这样的一个需求：
通过前端传入的数据渲染一个现成的打印模板出来，最后返回一个html格式的文本给前端，模板是有一个现成的，但是每次传入进来的数据是不同的，所以需要后端经过渲染出来返回渲染好的html内容给前端，这个时候我们就可以用thymeleaf来实现这个功能。 我们先建造一个模板：
<div id="print_main_full_box">
<style>
#print_main_full_box {
width: 100%;
}
#print_main_full_box > * {
margin: 0;
padding: 0;
}
#print_main_full_box > table, td, th {
margin: 0;
padding: 0;
border: 1px solid black;
border-collapse: collapse
}
.yiban {
width: 49%;
text-align: left;
display: inline-block;
/*border-left: 1px solid black;*/
}
.jiachu {
font-weight:bold;
}
td {
font-size: 14px;
}
.center {
text-align: center;
}
</style>
<table width="100%">
<tbody>
<tr class="jiachu">
<td colspan="8" class="center" style="font-size: 16px">
<div th:text = ${company}>公司</div>
<div th:text = ${title}>出货单</div>
</td>
</tr>
<tr>
<td colspan="8" class="center">
<span th:text = ${address}>地址</span>
</td>
</tr>
<tr>
<td colspan="8">
<div class="yiban">
<span class="jiachu">客户名称：<span th:text = ${cursumerName}>客户名称</span></span>
</div>
<div class="yiban">
<span class="jiachu">订单号：</span><span th:text = ${orderNo}>订单号</span>
</div>
</td>
</tr>
<tr>
<td colspan="8">
<div class="yiban">
<span class="jiachu">送货地址：<span th:text = ${deliveryAddr}>送货地址</span></span>
</div>
<div class="yiban">
<span class="jiachu">送货日期：</span><span th:text = ${actualDeliveryDate}>送货日期</span>
</div>
</td>
</tr>
<tr>
<td colspan="8">
<div class="yiban">
<span class="jiachu">联系电话：<span th:text = ${phone}>联系电话</span></span>
</div>
<div class="yiban">
<span class="jiachu">送货单号：</span><span th:text = ${invoiceNo}>送货单号</span>
</div>
</td>
</tr>
<tr class="center">
<td colspan="8" class="jiachu">
<div>机器名称:<span th:text = ${machineName}></span></div>
</td>
</tr>
<tr class="jiachu">
<td width="5%" align="center">序号</td>
<td width="5%" align="center">内部序号</td>
<td width="25%" align="center">图号</td>
<td width="5%" align="center">单位</td>
<td width="5%" align="center">数量</td>
<td width="5%" align="center">单价</td>
<td width="5%" align="center">总价</td>
<td width="10%" align="center">备注</td>
</tr>
<tr th:each = "prod : ${prods}" data-line="5">
<td align="center"><div data-item-index style="overflow: hidden;max-height: 40px;line-height: 20px;">序号</div></td>
<td align="center"><div th:text = ${prod.selfNumber} style="overflow: hidden;max-height: 40px;line-height: 20px;">内部序号</div></td>
<td align="center"><div th:text = ${prod.chartNo} style="overflow: hidden;max-height: 40px;line-height: 20px;">图号</div></td>
<td align="center"><div th:text = ${prod.company} style="overflow: hidden;max-height: 40px;line-height: 20px;">单位</div></td>
<td align="center"><div th:text = ${prod.invoiceNumber} style="overflow: hidden;max-height: 40px;line-height: 20px;">数量</div></td>
<td align="center"><div th:text = ${prod.unitPrice} style="overflow: hidden;max-height: 40px;line-height: 20px;">单价</div></td>
<td align="center"><div th:text = ${prod.totalPrice} style="overflow: hidden;max-height: 40px;line-height: 20px;">总价</div></td>
<td align="center"><div th:text = ${prod.remarks} style="overflow: hidden;max-height: 40px;line-height: 20px;">哦呵呵</div></td>
</tr>
<tr>
<td colspan="4" align="right">总计：</td>
<td align="right"><span th:text = ${invoiceNumber}>3</span></td>
<td align="right"></td>
<td align="right"><span th:text = ${totalPrice}>3</span></td>
<td align="right"></td>
</tr>
<tr>
<td colspan="4">送货单位签章:</td>
<td colspan="4">收货单位签章:</td>
</tr>
</tbody>
</table>
</div>这个里面是一个含有thymeleaf语法的模板，现在我们要通过传入的参数不同渲染出不一样的数据出来。 例如前端传入这样的数据：
{
"company":"csdner",
"title":"出货单",
"address":"中国",
"cursumerName":"客户",
"orderNo":"2432523234234234",
"deliveryAddr":"工业园",
"actualDeliveryDate":"20210526",
"phone":"18888888888",
"invoiceNo":"1567894",
"machineName":"25661615",
"prods":[
{
"selfNumber":"5555",
"chartNo":"6666",
"company":"csdner",
"invoiceNumber":"2222",
"unitPrice":"55",
"totalPrice":"555",
"remarks":"哈哈哈哈"
}
],
"invoiceNumber":"22",
"totalPrice":"102"
}后端要渲染出渲染好之后的html文档给前端：
<div id="print_main_full_box">
<style>
#print_main_full_box {
width: 100%;
}
#print_main_full_box > * {
margin: 0;
padding: 0;
}
#print_main_full_box > table, td, th {
margin: 0;
padding: 0;
border: 1px solid black;
border-collapse: collapse
}
.yiban {
width: 49%;
text-align: left;
display: inline-block;
/*border-left: 1px solid black;*/
}
.jiachu {
font-weight:bold;
}
td {
font-size: 14px;
}
.center {
text-align: center;
}
</style>
<table width="100%">
<tbody>
<tr class="jiachu">
<td colspan="8" class="center" style="font-size: 16px">
<div>csdner</div>
<div>出货单</div>
</td>
</tr>
<tr>
<td colspan="8" class="center">
<span>中国</span>
</td>
</tr>
<tr>
<td colspan="8">
<div class="yiban">
<span class="jiachu">客户名称：<span>客户</span></span>
</div>
<div class="yiban">
<span class="jiachu">订单号：</span><span>2432523234234234</span>
</div>
</td>
</tr>
<tr>
<td colspan="8">
<div class="yiban">
<span class="jiachu">送货地址：<span>工业园</span></span>
</div>
<div class="yiban">
<span class="jiachu">送货日期：</span><span>20210526</span>
</div>
</td>
</tr>
<tr>
<td colspan="8">
<div class="yiban">
<span class="jiachu">联系电话：<span>18888888888</span></span>
</div>
<div class="yiban">
<span class="jiachu">送货单号：</span><span>1567894</span>
</div>
</td>
</tr>
<tr class="center">
<td colspan="8" class="jiachu">
<div>机器名称:<span>25661615</span></div>
</td>
</tr>
<tr class="jiachu">
<td width="5%" align="center">序号</td>
<td width="5%" align="center">内部序号</td>
<td width="25%" align="center">图号</td>
<td width="5%" align="center">单位</td>
<td width="5%" align="center">数量</td>
<td width="5%" align="center">单价</td>
<td width="5%" align="center">总价</td>
<td width="10%" align="center">备注</td>
</tr>
<tr data-line="5">
<td align="center"><div data-item-index style="overflow: hidden;max-height: 40px;line-height: 20px;">序号</div></td>
<td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">5555</div></td>
<td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">6666</div></td>
<td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">csdner</div></td>
<td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">2222</div></td>
<td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">55</div></td>
<td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">555</div></td>
<td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">哈哈哈哈</div></td>
</tr>
<tr>
<td colspan="4" align="right">总计：</td>
<td align="right"><span>22</span></td>
<td align="right"></td>
<td align="right"><span>102</span></td>
<td align="right"></td>
</tr>
<tr>
<td colspan="4">送货单位签章:</td>
<td colspan="4">收货单位签章:</td>
</tr>
</tbody>
</table>
</div>好了，需求说完，开始实战：
第一步，我们是需要一个thymeleaf的模板，让在项目中引入一个工具类：
添加依赖：
<!-- Thymeleaf 模板引擎 -->
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.9.RELEASE</version>
</dependency>
<dependency>
<groupId>ognl</groupId>
<artifactId>ognl</artifactId>
<version>3.1.12</version>
</dependency>这是一个 Maven 项目的 dependencies 配置，用于声明项目所依赖的库。
该项目依赖了两个库：thymeleaf 和 ognl。
thymeleaf 是基于 Java 的模板引擎，在 Web 应用中经常用来将数据和 HTML 页面进行绑定。该库提供了丰富的标签和表达式语法，可以轻松地实现数据绑定和页面渲染。
ognl（Object-Graph Navigation Language）是一个面向对象的表达式语言，它可以通过对象属性的名称、方法调用和 Java 表达式来访问对象的属性。在模板引擎中，ognl 主要用于获取模板中需要使用的数据，以及执行一些动态操作。
以上两个库都是 Java 语言编写的，并且在当前代码中被用作 Thymeleaf 模板引擎的依赖库。当编译或运行程序时，Maven 将自动下载并安装这些库。
第二步，创建一个工具类：
这段代码是一个静态方法，其目的是将传入的模板和参数进行渲染，并返回渲染后的结果字符串。
该方法接收两个参数：template 和 params。其中，template 是一个字符串类型的参数，表示要使用哪个模板进行渲染。params 是一个 Map 类型的参数，表示要传递给模板的参数值。
在方法内部，首先创建了一个 Context 对象，然后将传入的参数设置到该对象中。Context 是 Thymeleaf 模板引擎中的一个上下文对象，它提供了模板所需的所有数据。
最后，通过 templateEngine.process() 方法，将模板和上下文对象进行渲染，得到最终的渲染结果，并将其作为方法返回值返回。
public class HTMLTemplateUtils {
private final static TemplateEngine templateEngine = new TemplateEngine();
/**
* 使用 Thymeleaf 渲染 HTML
* @param template HTML模板
* @param params 参数
* @return 渲染后的HTML
*/
public static String render(String template, Map<String, Object> params){
Context context = new Context();
context.setVariables(params);
return templateEngine.process(template, context);
}
}第三步：传入参数：
这段代码调用了一个名为 HTMLTemplateUtils.render() 的方法，传入了两个参数：content 和 map。
其中，content 是一个字符串类型的参数，表示模板的内容；map 是一个 Map<String, Object> 类型的参数，表示模板中所需的数据。
该方法返回一个字符串类型的结果，经过渲染后的模板内容将存储在该字符串中，可以根据需要进行输出或其他操作。
String output = HTMLTemplateUtils.render(content, map);
content为模板，map为前端传入的json数据
第四步，返回output，这个时候output就是我们已经渲染好的模板了
希望这篇文章能够帮助您了解如何在Spring Boot应用程序中集成Thymeleaf模板引擎，以便使用HTML/CSS/JavaScript文件动态生成Web文档。在本文中，我们简要介绍了如何在Maven项目中配置Thymeleaf，以及如何在控制器类中使用Thymeleaf来渲染HTML模板。通过这些步骤，您可以轻松地将Thymeleaf集成到您的Spring Boot应用程序，并开始使用模板引擎来映射数据并生成动态内容。
到此这篇关于SpringBoot集成thymeleaf渲染html模板的步骤详解的文章就介绍到这了,更多相关SpringBoot thymeleaf渲染html内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
ImportBeanDefinitionRegistrar手动控制BeanDefinition创建注册详解
这篇文章主要为大家介绍了ImportBeanDefinitionRegistrar手动控制BeanDefinition创建注册详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了Java案例使用比较排序器comparator实现成绩排序，主要通过案例用TreeSet集合存储多个学生信息，并遍历该集合，要按照总分从高到低进行排序,下文介绍需要的朋友可以参考一下2022-04-04
这篇文章主要介绍了ssm整合shiro使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了java方法通用返回结果集封装操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
hutool实战:IoUtil 流操作工具类（将内容写到流中）
这篇文章主要介绍了Go语言的io.ioutil标准库使用,是Golang入门学习中的基础知识,需要的朋友可以参考下,如果能给你带来帮助，请多多关注脚本之家的其他内容2021-06-06
这篇文章主要为大家详细介绍了java实现简单聊天室的单人版，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
这篇文章主要介绍了基于Maven骨架创建JavaWeb项目过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
本文以注册为例，在SpringMVC+Spring+Mybatis框架的基础上完成该短信验证码功能。需要的朋友一起来看下吧2016-12-12
反射赋予了我们在运行时分析类以及执行类中方法的能力。通过反射你可以获取任意一个类的所有属性和方法，你还可以调用这些方法和属性。本文就来和大家详细聊聊Java中的反射，感兴趣的可以了解一下2023-01-01
SpringCache 分布式缓存的实现方法(规避redis解锁的问题)
这篇文章主要介绍了SpringCache 分布式缓存的实现方法(规避redis解锁的问题),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
最新评论