SpringBoot的Thymeleaf做一个可自定义合并td的pdf表格

旭久2024-12-24 7:02

需求背景

项目开发过程中 有需要生成pdf的需求 这种需求内可能会存在使用表格去展示一些数据给用户 使其更明显直观的对比数据 这时候会存在一个项目或者仪器对应了多个单子 这就用到了table的td合并

样例展示

类似例子中pdf生成出来的图表 第一个项目有多个批号 这时候需要将项目的单元格td进行rowspan合并 但是因为这个对应的批号是动态的 类似第二个项目就只对应出来一条

实现过程

html 复制代码 
<table>
        <thead>
        <tr>
            <th>测定</th>
            <th colspan="6">绘制质控图的均值和标准差</th>
            <th colspan="6">当月原始测定结果</th>
            <th colspan="3">除失控后的测定结果</th>
            <th colspan="5">累计测定结果</th>
            <th colspan="2">质量目标</th>
        </tr>
        <tr>
            <!-- 测定 -->
            <th>项目</th>
            <!-- 绘制质控图的均值和标准差 -->
            <th>批号/效期</th>
            <th>单位</th>
            <th>水平</th>
            <th>均值</th>
            <th>SD</th>
            <th>CV%</th>
            <!-- 当月原始测定结果 -->
            <th>均值</th>
            <th>SD</th>
            <th>CV%</th>
            <th>N</th>
            <th>失控数</th>
            <th>在控率%</th>
            <!-- 除失控后的测定结果 -->
            <th>均值</th>
            <th>SD</th>
            <th>CV%</th>
            <!-- 累计测定结果 -->
            <th>均值</th>
            <th>SD</th>
            <th>CV%</th>
            <th>N</th>
            <th>%</th>
            <!-- 质量目标 -->
            <th>CV</th>
            <th>SD</th>
        </tr>
        </thead>
        <tbody>

        <tr th:each="item : ${reportBody}">
            <th:block th:if="${!#strings.isEmpty(item.customerReportItemName)}">
                <td th:text="${item.customerReportItemName}" th:rowspan="${item.rowspan}"></td>
            </th:block>
            <td th:text="${item.qcBatchId}"></td>
            <td th:text="${item.drawQcPictureUnit}"></td>
            <td th:text="${item.drawQcPictureLevel}"></td>
            <td th:text="${item.drawQcPictureAverageValue}"></td>
            <td th:text="${item.drawQcPictureSdValue}"></td>
            <td th:text="${item.drawQcPictureCvValue}"></td>
            <td th:text="${item.currentMonthOriginAverageValue}"></td>
            <td th:text="${item.currentMonthOriginSdValue}"></td>
            <td th:text="${item.currentMonthOriginCvValue}"></td>
            <td th:text="${item.currentMonthOriginCount}"></td>
            <td th:text="${item.currentMonthOriginOutControlCount}"></td>
            <td th:text="${item.currentMonthOriginInControlCountPercent}"></td>
            <td th:text="${item.currentMonthWithOutControlAverageValue}"></td>
            <td th:text="${item.currentMonthWithOutControlSdValue}"></td>
            <td th:text="${item.currentMonthWithOutControlCvValue}"></td>
            <td th:text="${item.currentYearAverageValue}"></td>
            <td th:text="${item.currentYearSdValue}"></td>
            <td th:text="${item.currentYearCvValue}"></td>
            <td th:text="${item.currentYearCount}"></td>
            <td th:text="${item.currentYearInControlPercent}"></td>
            <td th:text="${item.targetCvValue}"></td>
            <td th:text="${item.targetSdValue}"></td>
        </tr>

        </tbody>
    </table>

因为Thymeleaf内并不支持写js或者Java的逻辑 因为这部分是直接后端将数据对接到Thymeleaf 不经过前端 所以将逻辑放入后端去进行 在数据格式更改一个字段逻辑及加入一个字段去支持渲染（customerReportItemName、rowspan）

若项目内有多个批号 则在第一个批号对象内将customerReportItemName项目名称进行返回 rowspan是需要合并td的数量 若3个批号 这里则返回3 后面的批号内则不返回项目名称 这时候代码中if生效 会少进行生成一个td 若不进行判断的话单条行会多出一个空白td

html 复制代码 
//第一个项目的数据结构案例
[
        {
          customerReportItemCode: "zhikongtest",
          customerReportItemId: "1856580801022141383",
          customerReportItemName: "王质控-定量",
          rowspan: "3",
          currentMonthOriginAverageValue: "100.000",
          currentMonthOriginCount: 1,
          currentMonthOriginCvValue: "0.000",
          currentMonthOriginInControlCountPercent: "0.0",
          currentMonthOriginOutControlCount: 0,
          currentMonthOriginSdValue: "0.000",
          currentMonthWithOutControlAverageValue: "100.000",
          currentMonthWithOutControlCvValue: "0.000",
          currentMonthWithOutControlSdValue: "0.000",
          currentYearAverageValue: "100.000",
          currentYearCount: 1,
          currentYearCvValue: "0.000",
          currentYearSdValue: "0.000",
          drawQcPictureAverageValue: "12.12",
          drawQcPictureCvValue: "191.666",
          drawQcPictureLevel: "H",
          drawQcPictureSdValue: "23.23",
          qcBatchId: "王质控-定量-001",
          targetSdValue: "123.123",
        },
        {
          customerReportItemCode: "zhikongtest",
          customerReportItemId: "1856580801022141383",
          customerReportItemName: "",
          rowspan: "0",
          currentMonthOriginAverageValue: "100.000",
          currentMonthOriginCount: 1,
          currentMonthOriginCvValue: "0.000",
          currentMonthOriginInControlCountPercent: "0.0",
          currentMonthOriginOutControlCount: 0,
          currentMonthOriginSdValue: "0.000",
          currentMonthWithOutControlAverageValue: "100.000",
          currentMonthWithOutControlCvValue: "0.000",
          currentMonthWithOutControlSdValue: "0.000",
          currentYearAverageValue: "100.000",
          currentYearCount: 1,
          currentYearCvValue: "0.000",
          currentYearSdValue: "0.000",
          drawQcPictureAverageValue: "100.000",
          drawQcPictureCvValue: "0.000",
          drawQcPictureLevel: "H",
          drawQcPictureSdValue: "0.000",
          qcBatchId: "王质控-定量-003",
          targetSdValue: "123.123",
        },
        {
          customerReportItemCode: "zhikongtest",
          customerReportItemId: "1856580801022141383",
          customerReportItemName: "",
          rowspan: "0",
          currentMonthOriginAverageValue: "80.000",
          currentMonthOriginCount: 1,
          currentMonthOriginCvValue: "0.000",
          currentMonthOriginInControlCountPercent: "0.0",
          currentMonthOriginOutControlCount: 0,
          currentMonthOriginSdValue: "0.000",
          currentMonthWithOutControlAverageValue: "80.000",
          currentMonthWithOutControlCvValue: "0.000",
          currentMonthWithOutControlSdValue: "0.000",
          currentYearAverageValue: "80.000",
          currentYearCount: 1,
          currentYearCvValue: "0.000",
          currentYearSdValue: "0.000",
          drawQcPictureAverageValue: "80.000",
          drawQcPictureCvValue: "0.000",
          drawQcPictureLevel: "M",
          drawQcPictureSdValue: "0.000",
          qcBatchId: "王质控-定量-003",
          targetSdValue: "123.123",
        },
        {
          customerReportItemCode: "zhikongtest",
          customerReportItemId: "1856580801022141383",
          customerReportItemName: "",
          rowspan: "0",
          currentMonthOriginAverageValue: "87.500",
          currentMonthOriginCount: 2,
          currentMonthOriginCvValue: "14.286",
          currentMonthOriginInControlCountPercent: "0.0",
          currentMonthOriginOutControlCount: 0,
          currentMonthOriginSdValue: "12.500",
          currentMonthWithOutControlAverageValue: "87.500",
          currentMonthWithOutControlCvValue: "14.286",
          currentMonthWithOutControlSdValue: "12.500",
          currentYearAverageValue: "87.500",
          currentYearCount: 2,
          currentYearCvValue: "14.286",
          currentYearSdValue: "12.500",
          drawQcPictureAverageValue: "12.12",
          drawQcPictureCvValue: "191.666",
          drawQcPictureLevel: "L",
          drawQcPictureSdValue: "23.23",
          qcBatchId: "王质控-定量-001",
          targetSdValue: "123.123",
        },
        {
          customerReportItemCode: "zhikongtest",
          customerReportItemId: "1856580801022141383",
          customerReportItemName: "",
          rowspan: "0",
          currentMonthOriginAverageValue: "80.000",
          currentMonthOriginCount: 1,
          currentMonthOriginCvValue: "0.000",
          currentMonthOriginInControlCountPercent: "0.0",
          currentMonthOriginOutControlCount: 0,
          currentMonthOriginSdValue: "0.000",
          currentMonthWithOutControlAverageValue: "80.000",
          currentMonthWithOutControlCvValue: "0.000",
          currentMonthWithOutControlSdValue: "0.000",
          currentYearAverageValue: "80.000",
          currentYearCount: 1,
          currentYearCvValue: "0.000",
          currentYearSdValue: "0.000",
          drawQcPictureAverageValue: "80.000",
          drawQcPictureCvValue: "0.000",
          drawQcPictureLevel: "M",
          drawQcPictureSdValue: "0.000",
          qcBatchId: "王质控-定量-002",
          targetSdValue: "123.123",
        },
      ];
相关推荐
程序员猫哥_27 分钟前
HTML 生成网页工具推荐：从手写代码到 AI 自动生成网页的进化路径
前端·人工智能·html
杨超越luckly39 分钟前
HTML应用指南：利用GET请求获取中国500强企业名单，揭秘企业增长、分化与转型的新常态
前端·数据库·html·可视化·中国500强
Java面试题总结16 小时前
基于 Java 的 PDF 文本水印实现方案（iText7 示例）
java·python·pdf
傻啦嘿哟17 小时前
Python操作PDF页面详解：删除指定页的完整方案
开发语言·python·pdf
会编程的土豆19 小时前
新手前端小细节
前端·css·html·项目
闻哥19 小时前
从测试坏味道到优雅实践：打造高质量单元测试
java·面试·单元测试·log4j·springboot
周航宇JoeZhou20 小时前
JB2-7-HTML
java·前端·容器·html·h5·标签·表单
代码小库20 小时前
【课程作业必备】Web开发技术HTML静态网站模板 - 校园动漫社团主题完整源码
前端·html
云计算DevOps-韩老师20 小时前
HTML 中的行级元素（inline）、块级元素（block）、行内块元素（inline-block）
html
珹洺20 小时前
Bootstrap-HTML（二）深入探索容器，网格系统和排版
前端·css·bootstrap·html·dubbo
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03使用 1panel面板 部署 php网站04Vue-skills的中文文档05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06从零搭建一个 PHP 登录注册系统（含完整源码）07让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南08一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示09UV安装并设置国内源10Claude Code Skills 实用使用手册