html圖一
image.png
html圖二
image.png
打印效果一
image.png
打印效果二
image.png
打印效果三
image.png
上代碼
注意一定使用<thead>
<th>TABLE head</th>
</thead>
否則td也是會被頁面截斷的，可以將thead th設(shè)置成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就能自動判斷溢出本頁儒鹿，自動換到下一頁，而不會出現(xiàn)一個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
