SpringBoot集成thymeleaf渲染html模板的步驟詳解
有時(shí)候我們會(huì)遇到這樣的一個(gè)需求：
通過前端傳入的數(shù)據(jù)渲染一個(gè)現(xiàn)成的打印模板出來，最后返回一個(gè)html格式的文本給前端，模板是有一個(gè)現(xiàn)成的，但是每次傳入進(jìn)來的數(shù)據(jù)是不同的，所以需要后端經(jīng)過渲染出來返回渲染好的html內(nèi)容給前端，這個(gè)時(shí)候我們就可以用thymeleaf來實(shí)現(xiàn)這個(gè)功能。 我們先建造一個(gè)模板：
<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">訂單號(hào)：</span><span th:text = ${orderNo}>訂單號(hào)</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">聯(lián)系電話：<span th:text = ${phone}>聯(lián)系電話</span></span>
</div>
<div class="yiban">
<span class="jiachu">送貨單號(hào)：</span><span th:text = ${invoiceNo}>送貨單號(hào)</span>
</div>
</td>
</tr>
<tr class="center">
<td colspan="8" class="jiachu">
<div>機(jī)器名稱:<span th:text = ${machineName}></span></div>
</td>
</tr>
<tr class="jiachu">
<td width="5%" align="center">序號(hào)</td>
<td width="5%" align="center">內(nèi)部序號(hào)</td>
<td width="25%" align="center">圖號(hào)</td>
<td width="5%" align="center">單位</td>
<td width="5%" align="center">數(shù)量</td>
<td width="5%" align="center">單價(jià)</td>
<td width="5%" align="center">總價(jià)</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;">序號(hào)</div></td>
<td align="center"><div th:text = ${prod.selfNumber} style="overflow: hidden;max-height: 40px;line-height: 20px;">內(nèi)部序號(hào)</div></td>
<td align="center"><div th:text = ${prod.chartNo} style="overflow: hidden;max-height: 40px;line-height: 20px;">圖號(hào)</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;">數(shù)量</div></td>
<td align="center"><div th:text = ${prod.unitPrice} style="overflow: hidden;max-height: 40px;line-height: 20px;">單價(jià)</div></td>
<td align="center"><div th:text = ${prod.totalPrice} style="overflow: hidden;max-height: 40px;line-height: 20px;">總價(jià)</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">總計(jì)：</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>這個(gè)里面是一個(gè)含有thymeleaf語法的模板，現(xiàn)在我們要通過傳入的參數(shù)不同渲染出不一樣的數(shù)據(jù)出來。 例如前端傳入這樣的數(shù)據(jù)：
{
"company":"csdner",
"title":"出貨單",
"address":"中國",
"cursumerName":"客戶",
"orderNo":"2432523234234234",
"deliveryAddr":"工業(yè)園",
"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">訂單號(hào)：</span><span>2432523234234234</span>
</div>
</td>
</tr>
<tr>
<td colspan="8">
<div class="yiban">
<span class="jiachu">送貨地址：<span>工業(yè)園</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">聯(lián)系電話：<span>18888888888</span></span>
</div>
<div class="yiban">
<span class="jiachu">送貨單號(hào)：</span><span>1567894</span>
</div>
</td>
</tr>
<tr class="center">
<td colspan="8" class="jiachu">
<div>機(jī)器名稱:<span>25661615</span></div>
</td>
</tr>
<tr class="jiachu">
<td width="5%" align="center">序號(hào)</td>
<td width="5%" align="center">內(nèi)部序號(hào)</td>
<td width="25%" align="center">圖號(hào)</td>
<td width="5%" align="center">單位</td>
<td width="5%" align="center">數(shù)量</td>
<td width="5%" align="center">單價(jià)</td>
<td width="5%" align="center">總價(jià)</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;">序號(hào)</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">總計(jì)：</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>好了，需求說完，開始實(shí)戰(zhàn)：
第一步，我們是需要一個(gè)thymeleaf的模板，讓在項(xiàng)目中引入一個(gè)工具類：
添加依賴：
<!-- 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>這是一個(gè) Maven 項(xiàng)目的 dependencies 配置，用于聲明項(xiàng)目所依賴的庫。
該項(xiàng)目依賴了兩個(gè)庫：thymeleaf 和 ognl。
thymeleaf 是基于 Java 的模板引擎，在 Web 應(yīng)用中經(jīng)常用來將數(shù)據(jù)和 HTML 頁面進(jìn)行綁定。該庫提供了豐富的標(biāo)簽和表達(dá)式語法，可以輕松地實(shí)現(xiàn)數(shù)據(jù)綁定和頁面渲染。
ognl（Object-Graph Navigation Language）是一個(gè)面向?qū)ο蟮谋磉_(dá)式語言，它可以通過對(duì)象屬性的名稱、方法調(diào)用和 Java 表達(dá)式來訪問對(duì)象的屬性。在模板引擎中，ognl 主要用于獲取模板中需要使用的數(shù)據(jù)，以及執(zhí)行一些動(dòng)態(tài)操作。
以上兩個(gè)庫都是 Java 語言編寫的，并且在當(dāng)前代碼中被用作 Thymeleaf 模板引擎的依賴庫。當(dāng)編譯或運(yùn)行程序時(shí)，Maven 將自動(dòng)下載并安裝這些庫。
第二步，創(chuàng)建一個(gè)工具類：
這段代碼是一個(gè)靜態(tài)方法，其目的是將傳入的模板和參數(shù)進(jìn)行渲染，并返回渲染后的結(jié)果字符串。
該方法接收兩個(gè)參數(shù)：template 和 params。其中，template 是一個(gè)字符串類型的參數(shù)，表示要使用哪個(gè)模板進(jìn)行渲染。params 是一個(gè) Map 類型的參數(shù)，表示要傳遞給模板的參數(shù)值。
在方法內(nèi)部，首先創(chuàng)建了一個(gè) Context 對(duì)象，然后將傳入的參數(shù)設(shè)置到該對(duì)象中。Context 是 Thymeleaf 模板引擎中的一個(gè)上下文對(duì)象，它提供了模板所需的所有數(shù)據(jù)。
最后，通過 templateEngine.process() 方法，將模板和上下文對(duì)象進(jìn)行渲染，得到最終的渲染結(jié)果，并將其作為方法返回值返回。
public class HTMLTemplateUtils {
private final static TemplateEngine templateEngine = new TemplateEngine();
/**
* 使用 Thymeleaf 渲染 HTML
* @param template HTML模板
* @param params 參數(shù)
* @return 渲染后的HTML
*/
public static String render(String template, Map<String, Object> params){
Context context = new Context();
context.setVariables(params);
return templateEngine.process(template, context);
}
}第三步：傳入?yún)?shù)：
這段代碼調(diào)用了一個(gè)名為 HTMLTemplateUtils.render() 的方法，傳入了兩個(gè)參數(shù)：content 和 map。
其中，content 是一個(gè)字符串類型的參數(shù)，表示模板的內(nèi)容；map 是一個(gè) Map<String, Object> 類型的參數(shù)，表示模板中所需的數(shù)據(jù)。
該方法返回一個(gè)字符串類型的結(jié)果，經(jīng)過渲染后的模板內(nèi)容將存儲(chǔ)在該字符串中，可以根據(jù)需要進(jìn)行輸出或其他操作。
String output = HTMLTemplateUtils.render(content, map);
content為模板，map為前端傳入的json數(shù)據(jù)
第四步，返回output，這個(gè)時(shí)候output就是我們已經(jīng)渲染好的模板了
希望這篇文章能夠幫助您了解如何在Spring Boot應(yīng)用程序中集成Thymeleaf模板引擎，以便使用HTML/CSS/JavaScript文件動(dòng)態(tài)生成Web文檔。在本文中，我們簡要介紹了如何在Maven項(xiàng)目中配置Thymeleaf，以及如何在控制器類中使用Thymeleaf來渲染HTML模板。通過這些步驟，您可以輕松地將Thymeleaf集成到您的Spring Boot應(yīng)用程序，并開始使用模板引擎來映射數(shù)據(jù)并生成動(dòng)態(tài)內(nèi)容。
到此這篇關(guān)于SpringBoot集成thymeleaf渲染html模板的步驟詳解的文章就介紹到這了,更多相關(guān)SpringBoot thymeleaf渲染html內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
SpringMVC Idea 搭建 部署war的詳細(xì)過程
本文介紹了如何在IntelliJ IDEA中使用Maven模板創(chuàng)建一個(gè)Web項(xiàng)目,并詳細(xì)說明了如何配置web.xml、創(chuàng)建springmvc-servlet.xml和application.properties文件,以及如何使用Maven打包生成WAR文件并部署到Tomcat服務(wù)器,感興趣的朋友跟隨小編一起看看吧2025-01-01
SpringBoot時(shí)區(qū)問題解決以及徹底解決時(shí)差問題
這篇文章主要給大家介紹了關(guān)于SpringBoot時(shí)區(qū)問題解決以及徹底解決時(shí)差問題的相關(guān)資料,spring?boot作為微服務(wù)簡易架構(gòu),擁有其自身的特點(diǎn),快速搭建架構(gòu),簡單快捷,需要的朋友可以參考下2023-08-08
下面小編就為大家?guī)硪黄猨ava反射深入剖析。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
在本篇文章中小編給各位分享了關(guān)于如何提高java代碼的重用性的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們參考下。2019-07-07
java 配置MyEclipse Maven環(huán)境具體實(shí)現(xiàn)步驟
這篇文章主要介紹了 java 配置MyEclipse Maven環(huán)境具體實(shí)現(xiàn)步驟的相關(guān)資料,具有一定的參考價(jià)值，需要的朋友可以參考下2016-11-11
SpringBoot整合SpringSecurity和JWT和Redis實(shí)現(xiàn)統(tǒng)一鑒權(quán)認(rèn)證
Spring Security是一個(gè)可以為Java應(yīng)用程序提供全面安全服務(wù)的框架,同時(shí)它也可以輕松擴(kuò)展以滿足自定義需求,本文主要介紹了SpringBoot整合SpringSecurity和JWT和Redis實(shí)現(xiàn)統(tǒng)一鑒權(quán)認(rèn)證,感興趣的可以了解一下2023-11-11
SpringBoot高版本修改為低版本時(shí)測試類報(bào)錯(cuò)的解決方案
這篇文章主要介紹了SpringBoot高版本修改為低版本時(shí)測試類報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-09-09
這篇文章主要為大家詳細(xì)介紹了java如何解析/讀取xml文件的方法，感興趣的小伙伴們可以參考一下2016-03-03
Java開發(fā)之spring security實(shí)現(xiàn)基于MongoDB的認(rèn)證功能
這篇文章主要介紹了Java開發(fā)之spring security實(shí)現(xiàn)基于MongoDB的認(rèn)證功能,結(jié)合實(shí)例形式分析了spring security在非JDBC環(huán)境下的自定義認(rèn)證服務(wù)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-11-11
責(zé)任鏈?zhǔn)切袨樾驮O(shè)計(jì)模式的一種，通過前一個(gè)處理者記錄下一個(gè)處理者的方式形成一條處理鏈?？蛻舳嗽谡{(diào)用時(shí)只需要將請求傳遞到責(zé)任上即可，無需關(guān)注鏈路中的具體的傳遞過程。而鏈路中內(nèi)部的處理，是按照前一個(gè)處理者記錄的下一個(gè)處理者依次執(zhí)行2023-01-01