前端打印使用table布局小技巧

作者: beforerFE | 来源:发表于2022-10-27 23:35 被阅读0次

前端打印使用table布局小技巧
HTML: 语义化
前端网站5种布局
HTML布局
HTML表格、表单
css实现多行文字垂直居中
关于布局
九宫格布局
关于自适配的rem布局
前端css布局小技巧

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图