layui打印html頁面轉成pdf

時間  2020-12-01
標籤 javascript css html java this spa code orm htm 欄目 HTML 简体版
原文   原文鏈接 
<!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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程