码迷,mamicode.com
首页 > Web开发 > 详细

layui打印html页面转成pdf

时间:2018-11-21 19:37:26      阅读:2635      评论:0      收藏:0      [点我收藏+]

标签:内容   dhtml   substring   range   name   form   lin   use   cli   

<!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;">&#xe621;</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

标签:内容   dhtml   substring   range   name   form   lin   use   cli   

原文地址:https://www.cnblogs.com/zeussbook/p/9996905.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!