Theamleaf导出pdf模版编写(原始th/td编写表格)

需求:简单的theamleaf编写表格就是简单的th/td,新需求是导出的模版是学员table表,每个项目的学员数量是不定的,所以用到 <tr th:each="item,start:${studentList}">

所有代码:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;" charset="UTF-8"/>
    <title>培训项目考勤表</title>
    <style>
        body {
            font-family: 'SimSun'
        }
        td,th{
            height: 30px;
            text-align: center;
        }
        .title{
            font-size: 20px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            width: 100%;
            display: inline-block;
        }

        /**电子签名图片*/
        .esign-image{
            display: block;
            width: 100px;
            height: 25px;
            margin-left: 40px;
        }
        /*pdf的基本样式*/
        @page {
            size: 210mm 297mm; /*设置纸张大小:A4(210mm 297mm)、A3(297mm 420mm) 横向则反过来*/
            margin: 0.25in;
            padding: 1em;
            @bottom-center{
                content:"";
                font-family: SimSun;
                font-size: 12px;
                color: red;
            };
            @top-center { content: element(header) };
            @bottom-right{
                content:"第" counter(page) "页  共 " counter(pages) "页";
                font-family: SimSun;
                font-size: 12px;
                color:#000;
            };
        }




        .generalDiv {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
        }
        .photo-image{
            display: block;
            width: 25px;
            height: 25px;
        }

        label{
            font-size: 14px;
        }
        #content table, th, td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
            font-size: 12px;
            color: #0C0C0C;
        }
        .topTable{
            width: 100%;
        }
        .topTitle{
            width: 100%;

            font-size: 20px;
            text-align: center;
            font-weight: bold;
        }
        .word-wrap{
            word-break: break-word;word-wrap: break-word;white-space: pre-line
        }
    </style>
</head>

<body>
<div id="form" style="width: 100%">
    <div class="topTitle" style="margin-bottom: 20px">
      <span class="generalSpan"
            th:text="${courseName}">
      </span>考勤记录
    </div>
    <div id="proj" style="height: 60px;width: 100%">
        <table class="topTable">
            <tr style="border: none">
                <td style="border: none;width: 50%">
                    培训项目:<span class="generalSpan" style="margin-left:5px" name="project" th:text="${project}"></span>
                </td>
                <td style="border: none;width: 50%">
                    培训编号:<span class="generalSpan" style="margin-left:5px"  th:text="${trainId}"></span>
                </td>
            </tr>
        </table>
    </div>
    <div id="content" style="width: 100%;height: 100%;overflow-y: auto">
        <table class="topTable">
          <tr>
            <td colspan="5" style="text-align: right">
              填表日期:
              <span class="generalSpan" th:text="${courseName}"></span>
            </td>
          </tr>
            <tr>
                <td rowspan="2" style="width: 100px">序号</td>
                <td rowspan="2" style="width: 200px;">姓名</td>
                <td colspan="2">签到时间</td>
                <td rowspan="2">工作单位</td>
            </tr>
          <tr>
            <td>上午</td>
            <td>下午</td>
          </tr>
            <tr th:each="item,start:${studentList}">
                <td  th:text="${start.index+1}"></td>
                <td  th:text="${item.studentName}"></td>
                <td th:text="${item.shangwu}" ></td>
                <td th:text="${item.xiawu}" ></td>
                <td th:text="${item.groupName}" class="word-wrap" ></td>
            </tr>
          <tr>
            <td style="width: 100px">备注</td>
            <td colspan="4" th:text="${start.index+1}"></td>
          </tr>
          <tr>
            <td colspan="3">教员签字</td>
            <td colspan="2" th:text="${start.index+1}"></td>
          </tr>
        </table>
    </div>
</div>
</body>
</html>

效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/228607.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

harmonyOS学习笔记之@Provide装饰器和@Consume装饰器

Provide和Consume&#xff0c;应用于与后代组件的双向数据同步&#xff0c;应用于状态数据在多个层级之间传递的场景。不同于State/Link装饰器修饰的 父子组件之间通过命名参数机制传递&#xff0c;Provide和Consume摆脱参数传递机制的束缚&#xff0c;实现跨层级传递。 其中Pr…

全景万店通打造掌上智慧生活助手,助力店铺全景引流

随着网络经济的崛起&#xff0c;新一代的消费群体的消费习惯逐渐变得富有个性化&#xff0c;因此他们对于传统的营销方式具有视觉疲劳&#xff0c;传统广告的效果也越发微小&#xff0c;但是请明显来代言&#xff0c;成本又十分高昂&#xff0c;那么还有什么引流好方法呢&#…

Web信息收集,互联网上的裸奔者

Web信息收集&#xff0c;互联网上的裸奔者 1.资产信息收集2.域名信息收集3.子域名收集4.单点初步信息收集网站指纹识别服务器类型(Linux/Windows)网站容器(Apache/Nginx/Tomcat/IIS)脚本类型(PHP/JSP/ASP/ASPX)数据库类型(MySQL/Oracle/Accees/SqlServer) 5.单点深入信息收集截…

基于python+unittest实现接口自动化测试

简介 本文通过从Postman获取基本的接口测试Code简单的接口测试入手&#xff0c;一步步调整优化接口调用&#xff0c;以及增加基本的结果判断&#xff0c;讲解Python自带的Unittest框架调用&#xff0c;期望各位可以通过本文对接口自动化测试有一个大致的了解。 为什么要做接口…

React 中虚拟DOM是什么,为什么需要它?

注意&#xff1a;本节主要讲React中的虚拟DOM&#xff0c;但是虚拟DOM并不是React中特有的内容。 1. React 中虚拟 DOM是什么&#xff1f; 虚拟DOM是对真实DOM的描述&#xff0c;虚拟DOM是JS对象&#xff0c;实际上就是 JSX 通过 babel 转换成 React.createElement()&#xff…

中缀表达式转后缀表达式与后缀表达式计算(详解)

**中缀表达式转后缀表达式的一般步骤如下&#xff1a; 1&#xff1a;创建一个空的栈和一个空的输出列表。 2&#xff1a;从左到右扫描中缀表达式的每个字符。 3&#xff1a;如果当前字符是操作数&#xff0c;则直接将其加入到输出列表中。 4&#xff1a;如果当前字符是运算符&a…

你是外包,麻烦不要偷吃零食,注意素质..

我自己没经历过外包&#xff0c;靠自己的所见所闻可能写出来的东西会很主观&#xff0c;所幸我有不少外包的读者&#xff0c;还有几个在外包工作或工作过的朋友&#xff0c;在跟她们深度交流之后&#xff0c;这这里聊一下我自己的一些看法。 注&#xff1a;本文不代表所有外包公…

Python接口自动化测试数据和代码分离解析

common中存放的是整个项目中公共使用的封装方法 从工程目录上可以看到区分 datas中专门存放测试数据(yml文件) cases中专门集中存放测试用例 ... 数据分离的第一步先找到工程项目路径 1 2 3 4 5 6 7 8 9 10 11 12 # -*- encoding: utf-8 -*- """ __Software…

智能运维相关算法总结

概念&#xff1a; 智能运维&#xff08;AIOps&#xff09;是基于已有的运维数据&#xff08;日志、监控信息 、应用信息&#xff09;并通过机器学习的方法来进一步解决自动化运维没办法解决的问题&#xff0c;其核心是机器学习和大数据平台。 目标&#xff1a; 事前预警&…

C++ day59 下一个更大元素Ⅱ 接雨水

题目1&#xff1a;503 下一个更大元素Ⅰ 题目链接&#xff1a;下一个更大元素Ⅱ 对题目的理解 返回循环数组中每个元素的下一个更大元素&#xff0c; 数字x的下一个更大元素是循环等的搜索它的最近的下一个更大的数 数组的中至少有一个元素 本题难点在于循环遍历这里&…

新手搭建知识付费平台必备攻略:如何以低成本实现高转化?

我有才知识付费平台 一、引言 随着知识经济的崛起&#xff0c;越来越多的知识提供者希望搭建自己的知识付费平台。然而&#xff0c;对于新手来说&#xff0c;如何以低成本、高效率地实现这一目标&#xff0c;同时满足自身需求并提高客户转化率&#xff0c;是一大挑战。本文将…

【面试经典150 | 二叉树】从前序与中序遍历序列构造二叉树

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;递归 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于本题涉及到的数据结构等内容…

Java数字化健康卫生智慧云HIS系统源码

基于云计算技术的B/S架构云HIS集挂号、处方、收费、取药、病历于一体,完全适配各类中小型医院、诊所。 一、云 HIS定义 1、云 HIS 系统是运用云计算、大数据、物联网等新兴信息技术&#xff0c;按照现代医疗卫生管理要求&#xff0c;在一定区域范围内以数字化形式提供医疗卫生…

软文营销全过程分享,助力企业提高宣传效率

数字化时代下&#xff0c;软文营销已经成为许多企业推广品牌的手段&#xff0c;但是在营销过程中大部分企业认为只需要写好文章进行发布就够了&#xff0c;这其实是错误的&#xff0c;只会浪费企业的时间精力。今天媒介盒子就分享软文营销全过程&#xff0c;助力企业提高宣传效…

cpu 300% 爆满 内存占用不高 排查

top查询 cpu最高的PID ps -ef | grep PID 查看具体哪一个jar服务 jstack -l PID > ./jstack.log 下载/打印进程的线程栈信息 可以加信息简单分析 或进一步 查看堆内存使用情况 jmap -heap Java进程id jstack.log 信息示例 Full thread dump Java HotSpot(TM) 64-Bit Se…

SpringMVC 案例

文章目录 前言1. 计算器1.1 准备前端代码1.2 测试前端代码1.3 完成后端代码1.4 验证程序 2. 留言板2.1 前端代码准备2.2 测试前端代码2.3 完成前后端交互代码2.4 完成后端代码2.5 案例测试2.6 完善前后端交互2.7 完善后端代码2.8 完整功能测试 lombok简单的方式添加Lombok工具3…

小视频怎么做成二维码?视频二维码3步生成

在日常工作和生活中经常会看到各种类型的小视频、短视频&#xff0c;比如网页、抖音等等的视频都是可以下载查看的。当我们想要将下载视频分享给多个人看时&#xff0c;生成二维码的方式会更加的方便&#xff0c;那么视频如何生成二维码呢&#xff1f;下面就将快捷生成二维码的…

spring boot 3.2 整合 keycloak

背景 项目中用到 keycloak&#xff0c;因此其他所有管理页面要集成 keycloak 做统一登录认证。 Keycloak 侧配置 容器方式启动 keycloak 服务端 docker run -d --name mykeycloak -p 8080:8080 -e KEYCLOAK_ADMINadmin -e KEYCLOAK_ADMIN_PASSWORDadmin ke…

LeetCode 每日一题 Day 6(DFS+BFS)

1466. 重新规划路线 n 座城市&#xff0c;从 0 到 n-1 编号&#xff0c;其间共有 n-1 条路线。因此&#xff0c;要想在两座不同城市之间旅行只有唯一一条路线可供选择&#xff08;路线网形成一颗树&#xff09;。去年&#xff0c;交通运输部决定重新规划路线&#xff0c;以改变…

【GEE笔记】在线分类流程,标注样本点、分类和精度评价

GEE在线分类流程 介绍 GEE&#xff08;Google Earth Engine&#xff09;是一个强大的地理信息处理平台&#xff0c;可以实现在线的遥感影像分析和处理。本文将介绍如何使用GEE进行在线的分类流程&#xff0c;包括标注样本点、分类和精度评价。本文以2020年5月至8月的哨兵2影像…