利用浏览器的 window.print();打印分层表格【强制换页的关键】

最新推荐文章于 2023-02-23 13:15:28 发布

午夜玫瑰钻

最新推荐文章于 2023-02-23 13:15:28 发布

阅读量1.2k

点赞数

分类专栏：前端Jquery系列案例前端Javascript相关操作说明文章标签： jquery window.prind() 强制分页打印信息

本文链接：https://blog.csdn.net/gujinapenggu5/article/details/99577556

版权

<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="Bookmark" href="/favicon.ico" >
<link rel="Shortcut Icon" href="/favicon.ico" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        ul, li{
            list-style: none;
        }
        #print-content{
            width: 98%;
            margin: 10px auto;
        }
        .tableTopBorder_3{
            border-collapse: collapse;
            border: 1px solid #000;
            border-top: 0px solid #000;
        }
        .tableTopBorder_3 td, .tableTopBorder_3 th{
            border: 1px solid #000;
            text-align: center;
            padding: 3px 5px;
        }
        @media print{
            .pageBreak{
                page-break-after: always; /*强制换页的关键*/
            }
            .noPrint{
                display: none;
            }
        }
    </style>
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<!--/meta 作为公共模版分离出去-->
</head>
<body>
    <div id="print-content">
        <h3 style="text-align: center;">基本登记信息</h3>
        <table class="tableTopBorder_2">
           <tbody>
                   <tr>
                       <td>
                           <span>姓名：</span>
                           <span>张三</span>
                       </td>
                       <td>
                           <span>性别：</span>
                           <span>男</span>
                       </td>
                       <td>
                           <span>国籍：</span>
                           <span>中国</span>
                       </td>
                       <td>
                           <span>名族：</span>
                           <span>维吾尔族</span>
                       </td>
                   </tr>
                   <tr>
                       <td>
                           <span>生日：</span>
                           <span>2019-08-08</span>
                       </td>
                       <td>
                           <span>社保类型：</span>
                           <span>城镇灵活就业社会保险</span>
                       </td>
                       <td>
                           <span>血型：</span>
                           <span>AB型</span>
                       </td>
                       <td>
                           <span>生活方式：</span>
                           <span>与老伴同居</span>
                       </td>
                   </tr>
                   <tr>
                       <td>
                           <span>婚姻状况：</span>
                           <span>未婚</span>
                       </td>
                       <td>
                           <span>老人爱好：</span>
                           <span>吃饭睡觉打豆豆</span>
                       </td>
                       <td>
                           <span>紧急号码和老人关系：</span>
                           <span>父子</span>
                       </td>
                       <td>
                           <span>紧急联系人：</span>
                           <span>李四</span>
                       </td>
                   </tr>
                   <tr>
                       <td>
                           <span>出生日期：</span>
                           <span>2019-01-02</span>
                       </td>
                       <td>
                           <span>学历：</span>
                           <span>研究生以上学历</span>
                       </td>
                       <td>
                           <span>籍贯：</span>
                           <span>北京市</span>
                       </td>

最低0.47元/天解锁文章

午夜玫瑰钻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用浏览器的 window.print();打印分层表格【强制换页的关键】

<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="renderer" content="webkit|ie-comp|ie-stand"><meta http-equiv="X-UA-Com...
复制链接

扫一扫

专栏目录