springboot集成thymeleaf实战

弁言

笔者最近接到一个打印标签的需求，由于之前没有做过类似的功能，以是这也是一次学习探索的机会了，打印的结果图如下：

这个最终的打印是放在58mm*58mm的小标签纸上，条形码就是下面的35165165qweqweqe序列号天生的，也是图片形式。序列号应该放在条形码的正下方居中位置的，但是由于笔者前端技术有点拉跨，遇到样式啥的就头疼，这也是尽力后的结果了。下面看集成过程吧。
一、引入pom相关依靠包

笔者的情况是JDK17，pom相关版本如下，详细用什么版本不固定，不报错就行。

1. <dependency>
2.             <groupId>org.springframework.boot</groupId>
3.             <artifactId>spring-boot-starter-thymeleaf</artifactId>
4.         </dependency>
6.         <dependency>
7.             <groupId>com.google.zxing</groupId>
8.             <artifactId>core</artifactId>
9.             <version>3.4.1</version>
10.         </dependency>
12.         <dependency>
13.             <groupId>com.google.zxing</groupId>
14.             <artifactId>javase</artifactId>
15.             <version>3.4.1</version>
16.         </dependency>
18.         <dependency>
19.             <groupId>ognl</groupId>
20.             <artifactId>ognl</artifactId>
21.             <version>3.4.3</version>
22.         </dependency>
24.         <!-- Flying Saucer -->
25.         <dependency>
26.             <groupId>org.xhtmlrenderer</groupId>
27.             <artifactId>flying-saucer-pdf</artifactId>
28.             <version>9.1.20</version>
29.         </dependency>
31.         <!--itext-->
32.         <dependency>
33.             <groupId>com.lowagie</groupId>
34.             <artifactId>itext</artifactId>
35.             <version>2.1.7</version>
36.         </dependency>
39.         <dependency>
40.             <groupId>org.apache.commons</groupId>
41.             <artifactId>commons-lang3</artifactId>
42.             <version>3.12.0</version>
43.         </dependency>
45.         <dependency>
46.             <groupId>org.projectlombok</groupId>
47.             <artifactId>lombok</artifactId>
48.             <scope>provided</scope>
49.         </dependency>

复制代码

二、条形码工具类

1. package com.hulei.thymeleafproject;
3. import com.google.zxing.BarcodeFormat;
4. import com.google.zxing.EncodeHintType;
5. import com.google.zxing.client.j2se.MatrixToImageWriter;
6. import com.google.zxing.common.BitMatrix;
7. import com.google.zxing.oned.Code128Writer;
8. import org.apache.commons.lang3.StringUtils;
10. import javax.imageio.ImageIO;
11. import java.awt.*;
12. import java.awt.image.BufferedImage;
13. import java.io.ByteArrayOutputStream;
14. import java.io.IOException;
15. import java.util.HashMap;
16. import java.util.Map;
18. /**
19. * @author hulei
20. * @Date 2024/7/26 14:15
21. * @Description: 条形码工具类
22. *
23. */
24. public class BarCodeUtils {
25.     /**
26.      * 默认图片宽度
27.      */
28.     private static final int DEFAULT_PICTURE_WIDTH = 400;
30.     /**
31.      * 默认图片高度
32.      */
33.     private static final int DEFAULT_PICTURE_HEIGHT = 200;
35.     /**
36.      * 默认条形码宽度
37.      */
38.     private static final int DEFAULT_BAR_CODE_WIDTH = 300;
40.     /**
41.      * 默认条形码高度
42.      */
43.     private static final int DEFAULT_BAR_CODE_HEIGHT = 30;
45.     /**
46.      * 默认字体大小
47.      */
48.     private static final int DEFAULT_FONT_SIZE = 15;
50.     /**
51.      * 图片格式
52.      */
53.     private static final String FORMAT = "png";
55.     /**
56.      * 字符集
57.      */
58.     private static final String CHARSET = "utf-8";
61.     /**
62.      * 设置 条形码参数
63.      */
64.     private static final Map<EncodeHintType, Object> hints = new HashMap<>();
66.     static {
67.         hints.put(EncodeHintType.CHARACTER_SET, "utf-8");
68.     }
70.     /**
71.      * 获取条形码图片
72.      *
73.      * @param codeValue 条形码内容
74.      * @return 条形码图片
75.      */
76.     public static BufferedImage getBarCodeImage(String codeValue) {
77.         return getBarCodeImage(codeValue, DEFAULT_BAR_CODE_WIDTH, DEFAULT_BAR_CODE_HEIGHT);
78.     }
80.     /**
81.      * 获取条形码图片
82.      *
83.      * @param codeValue 条形码内容
84.      * @param width     宽度
85.      * @param height    高度
86.      * @return 条形码图片
87.      */
88.     public static BufferedImage getBarCodeImage(String codeValue, int width, int height) {
89.         // CODE_128是最常用的条形码格式
90.         return getBarCodeImage(codeValue, width, height, BarcodeFormat.CODE_128);
91.     }
93.     /**
94.      * 获取条形码图片
95.      *
96.      * @param codeValue     条形码内容
97.      * @param width         宽度
98.      * @param height        高度
99.      * @param barcodeFormat 条形码编码格式
100.      * @return 条形码图片
101.      */
102.     public static BufferedImage getBarCodeImage(String codeValue, int width, int height, BarcodeFormat barcodeFormat) {
103.         Code128Writer writer = switch (barcodeFormat) {
104.             case CODE_128 ->
105.                 // 最常见的条形码，但是不支持中文
106.                     new Code128Writer();
107.             case PDF_417 ->
108.                 // 支持中文的条形码格式
109.                     new Code128Writer();
110.             // 如果使用到其他格式，可以在这里添加
111.             default -> new Code128Writer();
112.         };
114.         // 编码内容, 编码类型, 宽度, 高度, 设置参数
115.         BitMatrix bitMatrix;
116.         bitMatrix = writer.encode(codeValue, barcodeFormat, width, height, hints);
117.         return MatrixToImageWriter.toBufferedImage(bitMatrix);
118.     }
120.     /**
121.      * 获取条形码
122.      *
123.      * @param codeValue 条形码内容
124.      * @param bottomStr 底部文字
125.      */
126.     public static BufferedImage getBarCodeWithWords(String codeValue, String bottomStr) {
127.         return getBarCodeWithWords(codeValue, bottomStr, "", "", "");
128.     }
130.     /**
131.      * 获取条形码
132.      * @param codeValue   条形码内容
133.      * @param bottomStr   底部文字
134.      * @param topLeftStr  左上角文字
135.      * @param topRightStr 右上角文字
136.      */
137.     public static BufferedImage getBarCodeWithWords(String codeValue,
138.                                                     String bottomStr,
139.                                                     String bottomStr2,
140.                                                     String topLeftStr,
141.                                                     String topRightStr) {
142.         return getCodeWithWords(getBarCodeImage(codeValue),
143.                 bottomStr,
144.                 bottomStr2,
145.                 topLeftStr,
146.                 topRightStr,
147.                 DEFAULT_PICTURE_WIDTH,
148.                 DEFAULT_PICTURE_HEIGHT,
149.                 0,
150.                 -20,
151.                 0,
152.                 0,
153.                 0,
154.                 0,
155.                 DEFAULT_FONT_SIZE);
156.     }
158.     /**
159.      * 获取条形码
160.      *
161.      * @param codeImage       条形码图片
162.      * @param firstBottomStr  底部文字首行
163.      * @param secondBottomStr 底部文字次行
164.      * @param topLeftStr      左上角文字
165.      * @param topRightStr     右上角文字
166.      * @param pictureWidth    图片宽度
167.      * @param pictureHeight   图片高度
168.      * @param codeOffsetX     条形码宽度
169.      * @param codeOffsetY     条形码高度
170.      * @param topLeftOffsetX  左上角文字X轴偏移量
171.      * @param topLeftOffsetY  左上角文字Y轴偏移量
172.      * @param topRightOffsetX 右上角文字X轴偏移量
173.      * @param topRightOffsetY 右上角文字Y轴偏移量
174.      * @param fontSize        字体大小
175.      * @return 条形码图片
176.      */
177.     public static BufferedImage getCodeWithWords(BufferedImage codeImage,
178.                                                  String firstBottomStr,
179.                                                  String secondBottomStr,
180.                                                  String topLeftStr,
181.                                                  String topRightStr,
182.                                                  int pictureWidth,
183.                                                  int pictureHeight,
184.                                                  int codeOffsetX,
185.                                                  int codeOffsetY,
186.                                                  int topLeftOffsetX,
187.                                                  int topLeftOffsetY,
188.                                                  int topRightOffsetX,
189.                                                  int topRightOffsetY,
190.                                                  int fontSize) {
191.         BufferedImage picImage = new BufferedImage(pictureWidth, pictureHeight, BufferedImage.TYPE_INT_RGB);
193.         Graphics2D g2d = picImage.createGraphics();
194.         // 抗锯齿
195.         setGraphics2D(g2d);
196.         // 设置白色
197.         setColorWhite(g2d, picImage.getWidth(), picImage.getHeight());
199.         // 条形码默认居中显示
200.         int codeStartX = (pictureWidth - codeImage.getWidth()) / 2 + codeOffsetX;
201.         int codeStartY = (pictureHeight - codeImage.getHeight()) / 2 + codeOffsetY;
202.         // 画条形码到新的面板
203.         g2d.drawImage(codeImage, codeStartX, codeStartY, codeImage.getWidth(), codeImage.getHeight(), null);
205.         // 画文字到新的面板
206.         g2d.setColor(Color.BLACK);
207.         // 字体、字型、字号
208.         g2d.setFont(new Font("微软雅黑", Font.PLAIN, fontSize));
209.         // 文字与条形码之间的间隔
210.         int wordAndCodeSpacing1 = 0;
212.         if (StringUtils.isNotEmpty(firstBottomStr)) {
213.             // 文字长度
214.             int strWidth = g2d.getFontMetrics().stringWidth(firstBottomStr);
215.             // 文字X轴开始坐标，这里是居中
216.             int strStartX = codeStartX + (codeImage.getWidth() - strWidth) / 2;
217.             // 文字Y轴开始坐标
218.             int strStartY = codeStartY + codeImage.getHeight() + fontSize + wordAndCodeSpacing1;
219.             // 画文字
220.             g2d.drawString(firstBottomStr, strStartX, strStartY);
221.         }
223.         // 文字与条形码之间的间隔
224.         int wordAndCodeSpacing2 = 30;
226.         if (StringUtils.isNotEmpty(secondBottomStr)) {
227.             // 文字长度
228.             int strWidth = g2d.getFontMetrics().stringWidth(secondBottomStr);
229.             // 文字X轴开始坐标，这里是居中
230.             int strStartX = codeStartX + (codeImage.getWidth() - strWidth) / 2;
231.             // 文字Y轴开始坐标
232.             int strStartY = codeStartY + codeImage.getHeight() + fontSize + wordAndCodeSpacing2;
233.             // 画文字
234.             g2d.drawString(secondBottomStr, strStartX, strStartY);
235.         }
237.         if (StringUtils.isNotEmpty(topLeftStr)) {
238.             // 文字长度
239.             int strWidth = g2d.getFontMetrics().stringWidth(topLeftStr);
240.             // 文字X轴开始坐标
241.             int strStartX = codeStartX + topLeftOffsetX;
242.             // 文字Y轴开始坐标
243.             int strStartY = codeStartY + topLeftOffsetY - wordAndCodeSpacing1;
244.             // 画文字
245.             g2d.drawString(topLeftStr, strStartX, strStartY);
246.         }
248.         if (StringUtils.isNotEmpty(topRightStr)) {
249.             // 文字长度
250.             int strWidth = g2d.getFontMetrics().stringWidth(topRightStr);
251.             // 文字X轴开始坐标，这里是居中
252.             int strStartX = codeStartX + codeImage.getWidth() - strWidth + topRightOffsetX;
253.             // 文字Y轴开始坐标
254.             int strStartY = codeStartY + topRightOffsetY - wordAndCodeSpacing1;
255.             // 画文字
256.             g2d.drawString(topRightStr, strStartX, strStartY);
257.         }
259.         g2d.dispose();
260.         picImage.flush();
262.         return picImage;
263.     }
265.     /**
266.      * 设置 Graphics2D 属性  （抗锯齿）
267.      *
268.      * @param g2d Graphics2D提供对几何形状、坐标转换、颜色管理和文本布局更为复杂的控制
269.      */
270.     private static void setGraphics2D(Graphics2D g2d) {
271.         g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
272.         g2d.setRenderingHint(RenderingHints.KEY_STROKE_CONTROL, RenderingHints.VALUE_STROKE_DEFAULT);
273.         Stroke s = new BasicStroke(1, BasicStroke.CAP_ROUND, BasicStroke.JOIN_MITER);
274.         g2d.setStroke(s);
275.     }
277.     /**
278.      * 设置背景为白色
279.      *
280.      * @param g2d Graphics2D提供对几何形状、坐标转换、颜色管理和文本布局更为复杂的控制
281.      */
282.     private static void setColorWhite(Graphics2D g2d, int width, int height) {
283.         g2d.setColor(Color.WHITE);
284.         //填充整个屏幕
285.         g2d.fillRect(0, 0, width, height);
286.         //设置笔刷
287.         g2d.setColor(Color.BLACK);
288.     }
290.     /**
291.      * 将 BufferedImage 转为 base64
292.      */
293.     public static String bufferedImage2Base64(BufferedImage image) throws IOException {
294.         // 输出流
295.         ByteArrayOutputStream stream = new ByteArrayOutputStream();
296.         ImageIO.write(image, FORMAT, stream);
297.         java.util.Base64.Encoder encoder = java.util.Base64.getEncoder();
298.         String imgBase64 = new String(encoder.encode(stream.toByteArray()), CHARSET);
299.         imgBase64 = "data:image/" + FORMAT + ";base64," + imgBase64;
300.         return imgBase64;
301.     }
303. }

复制代码

这个工具类中，默认天生的条形码图片格式是png，固然可以自己修改格式。
三、thymeleaf画模板

这个就是打印模板了，thymeleaf和freemarker一样都是模板引擎，freemarker模板语法更简单些。如果需要简单的变量替换和循环，FreeMarker大概是更好的选择。如果需要更丰富的模板功能和动态内容处理，Thymeleaf大概更得当。笔者这里选择的是thymeleaf。

1. <!DOCTYPE html>
2. <html lang="zh-CN">
3. <head>
4.     <title>维修库商品打印标签模板</title>
5.     <meta charset="UTF-8"></meta>
6.     <style>        body, html {
7.         margin: 0;
8.         padding: 0;
9.         width: 70mm;
10.         height: 70mm;
11.         font-family: 'SimSun', sans-serif; /* 防止生成的PDF中文不显示 */
12.     }
14.     h1 {
15.         text-align: center;
16.         font-size: 12px;
17.         line-height: 1.5;
18.     }
20.     p {
21.         font-size: 12px;
22.         margin: 3px 0;
23.     }
25.     .device-code {
26.         display: flex; /* 使用Flexbox布局 */
27.         align-items: center; /* 垂直居中对齐 */
28.     }
30.     .sn-container {
31.         display: inline-flex; /* 内联Flexbox容器 */
32.         align-items: center; /* 垂直居中对齐 */
33.         margin-left: 2px; /* 与“设备码：”之间的间距 */
34.     }
36.     .sn-image {
37.         width: auto; /* 图片宽度自适应 */
38.     }
40.     .sn-text {
41.         margin-top: 5px; /* 文本与图片之间的间距 */
42.         text-align: center; /* 文字居中 */
43.     }
45.     img {
46.         vertical-align: middle;
47.         display: inline-block;
48.     }
49.     </style>
50. </head>
51. <body>
52. <div>
53.     <h1>
54.         <img th:src="${zlbcImage}" alt="Image" style="height:30px;"></img>智链泊车
55.     </h1>
56.     <p th:text="${createTime != null ? '入库日期：'+ createTime : '入库日期：未知'}"></p>
57.     <p th:text="${materialName != null ? '名&nbsp;&nbsp;&nbsp;&nbsp;称：'+ materialName : '名称：未知'}"></p>
58.     <p th:text="${supplierName != null ? '客&nbsp;&nbsp;&nbsp;&nbsp;户：'+ supplierName : '客户：未知'}"></p>
59.     <p class="device-code">
60.         设&nbsp;备&nbsp;码：
61.         <span class="sn-container">
62.         <img class="sn-image" th:src="${sequencesNumberImage}" alt="Image"/>
63.         <div class="sn-text" th:text="${sequencesNumber}">${sequencesNumber}</div>
64.     </span>
65.     </p>
66. </div>
67. </body>
68. </html>

复制代码

这个模板里面的变量赋值时比较简单的，主要是有两个图片的变量zlbcImage和sequencesNumberImage，一个是聪明停车前面的原型小图标，一个就是条形码是，在赋值时是需要把图片读成BufferedImage，再把BufferedImage使用base64编码一下。
另外一个紧张的点是：font-family: ‘SimSun’, sans-serif;
这个属性必须加上，否则背面把html转成PDF时，中文会不表现。
四、字体准备simsun.ttc

这个字体是因为，我要把html转成一个PDF，中心转换需要一些字体，并且支持中文，网上搜索了下，选择了simsun.ttc这个字体，同时我在html上也指定了这个字体。网上下载这个字体资源库后，放在如下位置，以便程序中加载使用。

五、测试代码

1. package com.hulei.thymeleafproject;
3. import com.lowagie.text.pdf.BaseFont;
4. import jakarta.annotation.Resource;
5. import org.springframework.web.bind.annotation.PostMapping;
6. import org.springframework.web.bind.annotation.RequestBody;
7. import org.springframework.web.bind.annotation.RestController;
8. import org.thymeleaf.TemplateEngine;
9. import org.thymeleaf.context.Context;
10. import org.xhtmlrenderer.pdf.ITextFontResolver;
11. import org.xhtmlrenderer.pdf.ITextRenderer;
13. import javax.imageio.ImageIO;
14. import java.awt.image.BufferedImage;
15. import java.io.*;
16. import java.nio.file.Files;
17. import java.nio.file.Path;
18. import java.nio.file.Paths;
19. import java.text.SimpleDateFormat;
20. import java.util.*;
21. import java.util.List;
23. /**
24. * @author hulei
25. * @date 2024/7/27 9:26
26. */
28. @RestController
29. public class TestController {
31.     @Resource
32.     private TemplateEngine templateEngineBySelf;
34.     @PostMapping("/printSNLabel")
35.     public void test(@RequestBody List<PrintSNLabelReqDTO> list) {
36.         list.forEach(loop -> {
37.             Map<String, Object> map = new HashMap<>();
38.             map.put("createTime", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()));
39.             map.put("materialName", loop.getMaterialName());
40.             map.put("supplierName", loop.getSupplierName());
41.             //设备码图片二进制字节流
42.             BufferedImage sequencesNumberImage = BarCodeUtils.getBarCodeImage(loop.getSequencesNumber(), 100, 50);
43.             this.storeImage(sequencesNumberImage, "E:/111.png");
44.             try {
45.                 String base64Image = BarCodeUtils.bufferedImage2Base64(sequencesNumberImage);
46.                 System.out.println("base64Image: " + base64Image);
47.                 map.put("sequencesNumberImage", base64Image);
48.             } catch (IOException e) {
49.                 throw new RuntimeException(e);
50.             }
51.             map.put("sequencesNumber", loop.getSequencesNumber());
52.             try {
53.                 ClassLoader classLoader = Thread.currentThread().getContextClassLoader();
54.                 String symbolImagePath = "images/zlbcImage.png";
55.                 InputStream inputStream = classLoader.getResourceAsStream(symbolImagePath);
56.                 assert inputStream != null;
57.                 BufferedImage zlbcImageBufferedImage = ImageIO.read(inputStream);
58.                 this.storeImage(zlbcImageBufferedImage, "E:/222.png");
59.                 String zlbcImage = BarCodeUtils.bufferedImage2Base64(zlbcImageBufferedImage);
60.                 System.out.println("zlbcImage: " + zlbcImage);
61.                 map.put("zlbcImage", zlbcImage);
62.             } catch (IOException e) {
63.                 throw new RuntimeException(e);
64.             }
65.             try {
66.                 generateSNPicture(map);
67.             } catch (IOException e) {
68.                 throw new RuntimeException(e);
69.             }
70.         });
71.     }
74.     private void generateSNPicture(Map<String,Object> map) throws IOException {
75.         // 填充模板数据
76.         Context context = new Context();
77.         context.setVariable("createTime", map.get("createTime"));
78.         context.setVariable("materialName", map.get("materialName"));
79.         context.setVariable("supplierName", map.get("supplierName"));
80.         context.setVariable("sequencesNumberImage", map.get("sequencesNumberImage"));
81.         context.setVariable("sequencesNumber", map.get("sequencesNumber"));
82.         context.setVariable("zlbcImage", map.get("zlbcImage"));
83.         String htmlContent = templateEngineBySelf.process("printTemplate", context);
84.         System.out.println(htmlContent);
85.         htmlToPdf(htmlContent);
87.     }
89.     private void htmlToPdf(String htmlContent){
90.         try {
91.             //创建PDf文件
92.             ITextRenderer renderer = new ITextRenderer();
93.             //获取使用的字体数据（由于对中文字体显示可能会不支持，所以需要主动添加字体数据设置。）
94.             ITextFontResolver fontResolver = renderer.getFontResolver();
95.             fontResolver.addFont("templates/fonts/simsun.ttc",BaseFont.IDENTITY_H, BaseFont.EMBEDDED);
97.             //设置文件名称
98.             String sDate = new SimpleDateFormat("yyyyMMdd").format(new Date());
99.             String sTime = new SimpleDateFormat("HHmmssSSS").format(new Date());
101.             // 生成临时文件
102.             Path tempPdfPath = Files.createTempFile("temp_pdf_"+sDate+sTime, ".pdf");
103.             String pdfFilePath = tempPdfPath.toAbsolutePath().toString();
105.             // 将html生成文档
106.             renderer.setDocumentFromString(htmlContent);
107.             renderer.layout();
108.             OutputStream os = new FileOutputStream(pdfFilePath);
109.             // 将文档写入到输出流中
110.             renderer.createPDF(os);
111.             // 关闭流
112.             os.close();
114.             //把临时生成的文件转移到E盘,这里可以根据个人需求选在把临时文件上传到文件服务器
115.             System.out.println("pdfFilePath: "+pdfFilePath);
116.             File tempPdfFile = tempPdfPath.toFile();
117.             System.out.println("tempPdfFileName: "+tempPdfFile.getName());
118.             // 复制文件到E盘
119.             try {
120.                 Path targetPath = Paths.get("E:", tempPdfFile.getName()); // 目标路径
121.                 Files.copy(tempPdfPath, targetPath);
122.                 System.out.println("文件已复制到 E 盘");
123.             } catch (Exception e) {
124.                 System.err.println("复制文件时发生错误: " + e.getMessage());
125.             }
126.             //删除临时生成的本地PDF文件
127.             Files.delete(tempPdfPath);
128.         } catch (Exception e) {
129.             System.out.println("生成pdf文件失败");
130.             throw new RuntimeException(e);
131.         }
133.     }
135.     private void storeImage(BufferedImage image, String filePath){
136.         try {
137.             // 指定输出文件路径和格式
138.             File outputFile = new File(filePath);
140.             // 使用 ImageIO.write 方法将图片写入磁盘
141.             boolean isWritten = ImageIO.write(image, "png", outputFile);
143.             if (isWritten) {
144.                 System.out.println("图片已成功保存到磁盘.");
145.             } else {
146.                 System.out.println("图片保存失败.");
147.             }
148.         } catch (IOException e) {
149.             System.err.println("保存图片时发生错误: " + e.getMessage());
150.         }
151.     }
153. }

复制代码

这里为了展示代码，没有分层了，全都放在了controller层。主要分为三块：加载html模板，变量赋值，html转pdf。
转成pdf后的结果如下：

Apifox测试工具，测试数据如下，留意json是数组形式，因为后端controller接收的是List

整个代码我已上传到gitee：gitee堆栈地址

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。