• html js打印


    <!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>
     function printpage(){    
                  
                   window.print();
                   return false; 
            }
  • 相关阅读:
    datatable linq查询操作filed用法
    C# asp.net 中sql like in 参数化
    c#.net全站防止SQL注入类的代码
    js面向对象编程:if中可以使用那些作为判断条件呢?
    HTTP Method 详细解读(`GET` `HEAD` `POST` `OPTIONS` `PUT` `DELETE` `TRACE` `CONNECT`)--转
    浅析HTTP代理原理--转
    细说Cookie--转
    HTTP协议7之Cookie--转
    HTTP协议6之状态码--转
    HTTP协议5之代理--转
  • 原文地址:https://www.cnblogs.com/qingjiawen/p/14714304.html
Copyright © 2020-2023  润新知