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

news2024/11/18 20:40:29

需求:简单的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>

效果:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

12月7日作业

使用QT模仿一个登陆界面&#xff08;模仿育碧Ubisoft登录界面&#xff09; #include "myqq.h"MyQQ::MyQQ(QWidget *parent): QMainWindow(parent) {this->resize(880,550); //设置窗口大小this->setFixedSize(880,550); //固定窗口大小this->setStyleShee…

【Docker二】docker网络模式、网络通信、数据管理、资源控制

目录 一、docker网络模式&#xff1a; 1、概述 2、docker网络实现原理&#xff1a; 3、docker的网络模式&#xff1a; 3.1、bridge模式&#xff1a; 3.2、host模式&#xff1a; 3.3、container模式&#xff1a; 3.4、none模式&#xff1a; 3.5、自定义网络模式&#xf…

嵌入式总线技术学习(二):Modbus 总线技术详解

参考资料 工业控制网络 1. Modbus 概述 Modbus 是全球第一个真正用于工业现场的总线协议。为更好地普及和推动 Modbus 在基于以太网上的分布式应用&#xff0c;目前施耐德公司已将 Modbus 协议的所有权移交给 IDA (Interfacefor DistributedAutomation&#xff0c;分布式自动化…

docker:部署java Springboot项目

文章目录 1、打 jar 包1、创建Dockerfile3、创建镜像4、启动容器其他注意事项docker中jdk的版本命名举例&#xff1a;openjdk:11-ea-17-jre-slim举例&#xff1a;8u312-jre-nanoserver-1809 通过find找文件 1、打 jar 包 将项目打一个 jar 包&#xff0c;可以使用 IDEA 1、…

智能优化算法应用:基于跳蛛算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于跳蛛算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于跳蛛算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.跳蛛算法4.实验参数设定5.算法结果6.参考文献7.MATLAB…

前端依赖下载速度过慢解决方法,nrm 镜像管理工具

npm 默认镜像 &#xff1a;https://registry.npmjs.org/ 问题 使用 npm install 安装依赖的时候&#xff0c;受网络的限制&#xff0c;速度会很慢。 解决 使用国内镜像代理。 nrm nrm 是镜像源管理工具&#xff1b; 1. 安装 nrm npm install nrm --global# 查看镜像源列…

Java线程安全问题及其三大线程同步“锁”方案

文章目录 一、 线程安全问题概述二、线程安全问题的demo演示三、线程同步方案四、线程同步代码块五、同步方法六、Lock锁七、附录—多线程常用方法 在实际开发过程中&#xff0c;使用线程时最重要的一个问题非线程安全问题莫属。这篇博客会带你由浅入深的初步了解该问题&#x…

FolkMQ 内存型消息中间件,v1.0.18 发布

简介 采用 “内存运行” “快照持久化” “Broker 集群模式”&#xff08;可选&#xff09;基于 Socket.D 网络应用协议 开发&#xff0c;使用“多路复用”技术。全新设计&#xff0c;自主架构&#xff01; 角色功能生产端发布消息&#xff08;Qos0、Qos1&#xff09;、发布…

SOLIDWORKS参数化工具如何设置部分提取

编制参数表是参数化设置必不可少的一环&#xff0c;提取零部件参数又是生成参数表所必须的步骤&#xff0c;然而很多时候&#xff0c;模型的量级很大&#xff0c;需要变化的零部件只有三分之一&#xff0c;那如果全部提取出来&#xff0c;将耗费大量的时间&#xff0c;因此部分…

Swagger页面报错Resolver error at definitions

问题描述 打开swagger页面报错Resolver error at definitions 原因分析&#xff1a; 从错误提示可以看出&#xff0c;是由map引起的原因&#xff0c;具体是因为swagger配置没有默认添加map的复杂结构引起的&#xff0c;需要手动添加。 解决方案&#xff1a; 找到swagger配置类…

黄金代理商怎么做才会受客户青睐?

黄金代理商是市场中推广现货黄金投资的角色&#xff0c;黄金代理商做的越好&#xff0c;推广的效果越明显&#xff0c;投资者就越多&#xff0c;这样他们就可以获得多一点黄金代理平台的佣金。所以&#xff0c;黄金代理商们会使劲浑身解数&#xff0c;让自己获得更多客户的青睐…

【ARM Trace32(劳特巴赫) 使用介绍 13 -- Trace32 Var 变量篇】

文章目录 Trace32 查看变量值Var.view 查看变量值Var.view 查看数据类型的大小Var.view 根据变量地址查看变量值 地址类型判断 Trace32 查看变量值 步骤1 步骤2 步骤3&#xff1a; 步骤4&#xff1a; 查看结构体变量 str_t32 的值 struct t32_str {uint32_t t32_val…

【JavaEE进阶】 Spring使用注解存储对象

文章目录 &#x1f334;序言&#x1f340;前置⼯作&#xff1a;配置扫描路径&#x1f384;添加注解存储 Bean 对象&#x1f333;类注解&#x1f6a9;为什么要这么多类注解&#x1f6a9;注解之间的联系 &#x1f38b;⽅法注解 Bean&#x1f6a9;⽅法注解需要配合类注解使⽤ ⭕总…

合合信息旗下启信宝与鹏城实验室达成数据托管合作,“AI靶场”让数据管理更精准

数字经济时代&#xff0c;数据已成为新型生产要素。通过“数据托管”等形式对数据进行集中管理&#xff0c;有助于保护数据主体权益&#xff0c;促进数据共享和运用效率&#xff0c;对数字经济的发展具有重要意义。近期&#xff0c;在深圳数据交易所&#xff08;简称“深数所”…

如何使用eXtplorer+cpolar内网穿透搭建个人云存储实现公网访问

文章目录 1. 前言2. eXtplorer网站搭建2.1 eXtplorer下载和安装2.2 eXtplorer网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1. 前言 通过互联网传输文件&#xff0c;是互联网最重要的应用之一&#xff0c;无论是…

Cloak斗篷技术不知道?超实用干货,FP商家必读!

都2023年了&#xff0c;还有很多人犹豫要不要入局独立站。心动不如行动&#xff0c;如果想要在跨境独立站中干出一番新事业&#xff0c;要赶紧动起来。部分卖家在出海初期&#xff0c;都想着出售FP产品&#xff0c;涉及到FP产品&#xff0c;各大主流平台上都有严格的审核机制&a…

如何教你四个类搞定分层自动化测试框架

写在前面 我们刚开始做自动化测试&#xff0c;可能写的代码都是基于原生写的代码&#xff0c;看起来特别不美观&#xff0c;而且感觉特别生硬。 来看下面一段代码&#xff1a; 如果你想学习自动化测试&#xff0c;我这边给你推荐一套视频&#xff0c;这个视频可以说是B站播放…

华三AC+AP部署无线基本配置

拓扑图&#xff1a; 1、创建管理VLAN与AP管理VLAN、终端接入VLAN、配置管理VLAN IP地址 设备管理VLAN 56、AP管理VLAN 101、终端接入VLAN 10 AC、HeXin、JieRu。&#xff08;创建VLAN&#xff09;[H3C]vlan 101[H3C-vlan101]description AP-vlan[H3C]vlan 56[H3C-vlan56]desc…

SAP UI5 walkthrough step9 Component Configuration

在之前的章节中&#xff0c;我们已经介绍完了MVC的架构和实现&#xff0c;现在我们来讲一下&#xff0c;SAPUI5的结构 这一步&#xff0c;我们将所有的UI资产从index.html里面独立封装在一个组件里面 这样组件就变得独立&#xff0c;可复用了。这样&#xff0c;无所什么时候我…

【51单片机系列】74HC595实现对LED点阵的控制

本文是关于LED点阵的使用&#xff0c;使用74HC595模块实现对LED点阵的控制。 文章目录 一、8x8LED点阵的原理1.1 LED点阵显示原理1.2 LED点阵内部结构图1.3 开发板上的LED点阵原理图1.4 74HC595芯片 二、使用74HC595模块实现流水灯效果三、 使用74HC595模块控制LED点阵对角线亮…