前端打印使用table布局小技巧
2022-10-27 本文已影响0人
beforerFE
html图一
image.png
html图二
image.png
打印效果一
image.png
打印效果二
image.png
打印效果三
image.png
上代码
注意一定使用<thead>
<th>TABLE head</th>
</thead>
否则td也是会被页面截断的，可以将thead th设置成0高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mybox {
margin: 0 auto;
width: 600px;
background: #f5f5f5;
}
.mytable {
width: 600px;
border-collapse: collapse;
}
.mytable th {
background-color: yellow;
}
.mytable td {
background: #fff;
}
.mytable td, .mytable th{
padding: 30px 10px;
border: 1px solid black;
height: auto;
}
.mydiv600 {
border: 4px solid red;
width: 500px;
height: 600px;
font-size: 19px;
color: blue;
}
.mydiv1000 {
/* 只要这个div 没有超过一页打印纸的高度，在打印的时候，td就能自动判断溢出本页，自动换到下一页，而不会出现一个td分别在两页的情况*/
border: 4px solid red;
width: 500px;
height: 1000px;
font-size: 19px;
color: blue;
}
@media print {
.mytable th {
font-size: 40px;
}
}
</style>
</head>
<body>
<div class="mybox">
<table class="mytable">
<colgroup>
<col width="500px">
</colgroup>
<thead>
<th>TABLE head</th>
</thead>
<tbody>
<tr>
<td>11111111</td>
</tr>
<tr>
<td>2222222</td>
</tr>
<tr>
<td>
<div class="mydiv600">
mydiv600
</div>
</td>
</tr>
<tr>
<td>
<div class="mydiv1000">mydiv1000</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
把整段html 传给后端，后端使用pyhtml2pdf，生成的pdf效果
间pdf图
image.png
image.png
