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

需求背景

项目开发过程中 有需要生成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",
        },
      ];
相关推荐
兴趣使然_4 小时前
【笔记】使用 html 创建网址快捷方式
笔记·html·js
FreeBuf_5 小时前
微软365 PDF导出功能存在本地文件包含漏洞,可泄露敏感服务器数据
服务器·microsoft·pdf
Zachery Pole9 小时前
BootStrap
前端·bootstrap·html
淮北49411 小时前
最简单的实验室资产管理系统,使用Flask,mysql,html(四、知识补充)
mysql·flask·html
多啦C梦a11 小时前
【前端必修】闭包、`this`、`箭头函数`、`bind`、节流,一篇文章全懂!
前端·javascript·html
Canaan28511 小时前
前端开发-标签
html
爱编程的喵13 小时前
深入理解JavaScript节流函数:从原理到实战应用
前端·javascript·html
熊出没14 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
最懒的菜鸟16 小时前
MinerU将PDF转成md文件,并分拣图片
人工智能·pdf
web守墓人19 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html