当前位置:   article > 正文

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

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

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

所有代码:

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;" charset="UTF-8"/>
  5. <title>培训项目考勤表</title>
  6. <style>
  7. body {
  8. font-family: 'SimSun'
  9. }
  10. td,th{
  11. height: 30px;
  12. text-align: center;
  13. }
  14. .title{
  15. font-size: 20px;
  16. height: 35px;
  17. line-height: 35px;
  18. text-align: center;
  19. width: 100%;
  20. display: inline-block;
  21. }
  22. /**电子签名图片*/
  23. .esign-image{
  24. display: block;
  25. width: 100px;
  26. height: 25px;
  27. margin-left: 40px;
  28. }
  29. /*pdf的基本样式*/
  30. @page {
  31. size: 210mm 297mm; /*设置纸张大小:A4(210mm 297mm)、A3(297mm 420mm) 横向则反过来*/
  32. margin: 0.25in;
  33. padding: 1em;
  34. @bottom-center{
  35. content:"";
  36. font-family: SimSun;
  37. font-size: 12px;
  38. color: red;
  39. };
  40. @top-center { content: element(header) };
  41. @bottom-right{
  42. content:"第" counter(page) "页 共 " counter(pages) "页";
  43. font-family: SimSun;
  44. font-size: 12px;
  45. color:#000;
  46. };
  47. }
  48. .generalDiv {
  49. height: 30px;
  50. line-height: 30px;
  51. font-size: 14px;
  52. }
  53. .photo-image{
  54. display: block;
  55. width: 25px;
  56. height: 25px;
  57. }
  58. label{
  59. font-size: 14px;
  60. }
  61. #content table, th, td {
  62. border: 1px solid grey;
  63. border-collapse: collapse;
  64. padding: 5px;
  65. font-size: 12px;
  66. color: #0C0C0C;
  67. }
  68. .topTable{
  69. width: 100%;
  70. }
  71. .topTitle{
  72. width: 100%;
  73. font-size: 20px;
  74. text-align: center;
  75. font-weight: bold;
  76. }
  77. .word-wrap{
  78. word-break: break-word;word-wrap: break-word;white-space: pre-line
  79. }
  80. </style>
  81. </head>
  82. <body>
  83. <div id="form" style="width: 100%">
  84. <div class="topTitle" style="margin-bottom: 20px">
  85. <span class="generalSpan"
  86. th:text="${courseName}">
  87. </span>考勤记录
  88. </div>
  89. <div id="proj" style="height: 60px;width: 100%">
  90. <table class="topTable">
  91. <tr style="border: none">
  92. <td style="border: none;width: 50%">
  93. 培训项目:<span class="generalSpan" style="margin-left:5px" name="project" th:text="${project}"></span>
  94. </td>
  95. <td style="border: none;width: 50%">
  96. 培训编号:<span class="generalSpan" style="margin-left:5px" th:text="${trainId}"></span>
  97. </td>
  98. </tr>
  99. </table>
  100. </div>
  101. <div id="content" style="width: 100%;height: 100%;overflow-y: auto">
  102. <table class="topTable">
  103. <tr>
  104. <td colspan="5" style="text-align: right">
  105. 填表日期:
  106. <span class="generalSpan" th:text="${courseName}"></span>
  107. </td>
  108. </tr>
  109. <tr>
  110. <td rowspan="2" style="width: 100px">序号</td>
  111. <td rowspan="2" style="width: 200px;">姓名</td>
  112. <td colspan="2">签到时间</td>
  113. <td rowspan="2">工作单位</td>
  114. </tr>
  115. <tr>
  116. <td>上午</td>
  117. <td>下午</td>
  118. </tr>
  119. <tr th:each="item,start:${studentList}">
  120. <td th:text="${start.index+1}"></td>
  121. <td th:text="${item.studentName}"></td>
  122. <td th:text="${item.shangwu}" ></td>
  123. <td th:text="${item.xiawu}" ></td>
  124. <td th:text="${item.groupName}" class="word-wrap" ></td>
  125. </tr>
  126. <tr>
  127. <td style="width: 100px">备注</td>
  128. <td colspan="4" th:text="${start.index+1}"></td>
  129. </tr>
  130. <tr>
  131. <td colspan="3">教员签字</td>
  132. <td colspan="2" th:text="${start.index+1}"></td>
  133. </tr>
  134. </table>
  135. </div>
  136. </div>
  137. </body>
  138. </html>

效果:

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/代码吟游诗人/article/detail/62697
推荐阅读
相关标签
  

闽ICP备14008679号