<!DOCTYPE html>
<html lang="zh">
<head>
??? <meta charset="UTF-8" />
??? <meta name="viewport" content="width=device-width, initial-scale=1.0" />
??? <meta http-equiv="X-UA-Compatible" content="ie=edge" />
??? <title>Document</title>
??? <link rel="stylesheet" type="text/css" href="lib/layui/css/layui.css"/>
??? <script src="lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
??? <script language="javascript">
???function preview(oper)
???{
???????if (oper < 10){
???????????bdhtml=window.document.body.innerHTML;//获取当前页的html代码
???????????sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域
???????????eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域
???????????prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html
???????????prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
???????????window.document.body.innerHTML=prnhtml;
???????????window.print();
???????????window.document.body.innerHTML=bdhtml;
???????} else {
???????????window.print();
???????}
???}
</script>
??? <!--打印-->
</head>
<body>
<style type="text/css">
??? .layui-tab-item{
???????????????margin-top: 100px;
???????????}
??? .layui-this{
???????????????????background-color: orange;
???????????}
??? </style>
<div class="layui-tab">
??? <ul class="layui-tab-title">
??? <li class="layui-this">
??? <table border="1" align="center" id="informationtable">
??? <tr>
??? <th>年龄1</th>
??? <th>身高</th>
??? <th>体重</th>
??? <th>疾病史</th>
??? </tr>
??? <tr>
??? <td>61岁 </td>
??? <td>161cm</td>
??? <td>61kg</td>
??? <td>高血压、糖尿病</td>
??? </tr>
??? </table>
??? </li>
??? <!--标签1-->
??? <li>
??? <table border="1" align="center" id="informationtable">
??? <tr>
??? <th>年龄2</th>
??? <th>身高</th>
??? <th>体重</th>
??? <th>疾病史</th>
??? </tr>
??? <tr>
??? <td>61岁 </td>
??? <td>161cm</td>
??? <td>61kg</td>
??? <td>高血压、糖尿病</td>
??? </tr>
??? </table>
??? </li>
??? <!--标签2-->
??? <li>
??? <table border="1" align="center" id="informationtable">
??? <tr>
??? <th>年龄2</th>
??? <th>身高</th>
??? <th>体重</th>
??? <th>疾病史</th>
??? </tr>
??? <tr>
??? <td>61岁 </td>
??? <td>161cm</td>
??? <td>61kg</td>
??? <td>高血压、糖尿病</td>
??? </tr>
??? </table>
??? </li>
??? <!--标签3-->
??? <li>
??? <table border="1" align="center" id="informationtable">
??? <tr>
??? <th>年龄2</th>
??? <th>身高</th>
??? <th>体重</th>
??? <th>疾病史</th>
??? </tr>
??? <tr>
??? <td>61岁 </td>
??? <td>161cm</td>
??? <td>61kg</td>
??? <td>高血压、糖尿病</td>
??? </tr>
??? </table>
??? </li>
??? <li>
??? <!--标签4-->
??? <table border="1" align="center" id="informationtable">
??? <tr>
??? <th>年龄2</th>
??? <th>身高</th>
??? <th>体重</th>
??? <th>疾病史</th>
??? </tr>
??? <tr>
??? <td>61岁 </td>
??? <td>161cm</td>
??? <td>61kg</td>
??? <td>高血压、糖尿病</td>
??? </tr>
??? </table>
??? </li>
??? <!--标签5-->
??? </ul>
??? <!--startprint1-->
???<!--打印内容开始-->
??? <div class="layui-tab-content">
??? <div class="layui-tab-item layui-show">
??? <table border="1" align="center" id="informationtable">
??? <tr>
??? <th>年龄1</th>
??? <th>身高</th>
??? <th>体重</th>
??? <th>疾病史</th>
??? </tr>
??? <tr>
??? <td>61岁 </td>
??? <td>161cm</td>
??? <td>61kg</td>
??? <td>高血压、糖尿病</td>
??? </tr>
??? </table>
??? </div>
??? <!--对应1-->
??? <div class="layui-tab-item"><table border="1" align="center" id="informationtable">
??? <tr>
??? <th>年龄2</th>
??? <th>身高</th>
??? <th>体重</th>
??? <th>疾病史</th>
??? </tr>
??? <tr>
??? <td>61岁 </td>
??? <td>161cm</td>
??? <td>61kg</td>
??? <td>高血压、糖尿病</td>
??? </tr>
??? </table></div>
??? <!--对应2-->
??? <div class="layui-tab-item"><table border="1" align="center" id="informationtable">
??? <tr>
??? <th>年龄3</th>
??? <th>身高</th>
??? <th>体重</th>
??? <th>疾病史</th>
??? </tr>
??? <tr>
??? <td>61岁 </td>
??? <td>161cm</td>
??? <td>61kg</td>
??? <td>高血压、糖尿病</td>
??? </tr>
??? </table></div>
??? <!--对应3-->
??? <div class="layui-tab-item"><table border="1" align="center" id="informationtable">
??? <tr>
??? <th>年龄4</th>
??? <th>身高</th>
??? <th>体重</th>
??? <th>疾病史</th>
??? </tr>
??? <tr>
??? <td>61岁 </td>
??? <td>161cm</td>
??? <td>61kg</td>
??? <td>高血压、糖尿病</td>
??? </tr>
??? </table></div>
??? <!--对应4-->
??? <div class="layui-tab-item"><table border="1" align="center" id="informationtable">
??? <tr>
??? <th>年龄5</th>
??? <th>身高</th>
??? <th>体重</th>
??? <th>疾病史</th>
??? </tr>
??? <tr>
??? <td>61岁 </td>
??? <td>161cm</td>
??? <td>61kg</td>
??? <td>高血压、糖尿病</td>
??? </tr>
??? </table></div>
??? <!--对应5-->
??? </div>
??? <!--打印内容结束-->
???<!--endprint1-->
</div>
<div class="layui-inline" title="打印" ?onclick=preview(1) ><i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i></div>
<!-- <input type=button name=‘button_export‘ title=‘打印‘ onclick=preview(1) value=打印1>-->
<script>
???layui.use(‘element‘, function(){
???????var element = layui.element;
???});
</script>
</body>
</html>
layui打印html页面转成pdf
原文地址：https://www.cnblogs.com/zeussbook/p/9996905.html