<!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的更多相关文章

  1. Microsoft.Office.Interop.Excel的用法以及利用Microsoft.Office.Interop.Excel将web页面转成PDF

    1.常见用法           using Microsoft.Office.Interop.Excel; 1)新建一个Excel ApplicationClass ExcelApp = New A ...

  2. 利用Microsoft.Office.Interop.Excel 将web页面转成PDF

    网上有很多将Web页面转成PDF的方法,还有许多收费的第三方插件.其实利用Office 自带的将EXCEL发布成PDF的功能就可以实现,如果你的需求没有多复杂,可以采用笔者的方法. 首先将web页面h ...

  3. 【jsPDF】jsPDF插件实现将html页面转换成PDF，并下载，支持分页

    1.目的:在前段是 jQuery库 或者 VUE库 或者两者混合库,将html 页面和数据 转换成PDF格式并下载,支持分页 1.项目背景: 对客户报修记录进行分类统计,并生成各种饼图.柱状图.线性图 ...

  4. html页面转换成pdf

    一般页面都是.jsp页面,所以要把.jsp转换成html,在生成pdf,在网上找了好多方法,只有用一个插件,wkhtmltopdf-0.8.3.exe,生成的pdf会相对的好看. 先附上我做的.jsp ...

  5. 使用JavaScript将当前页面保存成PDF，支持图片和文字的保存

    前端开发的朋友们可能会遇到这个需求:将您负责开发的网页的全部内容,包括文字和图片,一起保存成一个PDF文件.如果采用屏幕截图的话,默认Windows操作系统的截图按钮无法完整截取超过一屏幕的屏幕内容. ...

  6. 利用itext将html页面转成pdf(不模糊)

    1.maven项目进入依赖 <dependency> <groupId>org.xhtmlrenderer</groupId> <artifactId> ...

  7. vue将页面导出成pdf

    npm i jspdf-html2canvas prinOut(){ // 导出pdf let page = document.querySelector('.app-main'); // page ...

  8. Vue 页面导出成PDF文件

    注意事项 如果导出的页面中设计到图片或者其他文件跨域文件,需要后端服务配合 安装依赖 npm install html2Canvas --save npm install jspdf--save 封装 ...

  9. html 转成 pdf 进行预览、下载、打印

    html 页面转成 pdf,直接看代码: 参考地址: https://github.com/linwalker/render-html-to-pdf 给出代码 方便粘贴: var downPdf = ...

随机推荐

  1. [LightOJ1038] Race to 1 Again

    传送门:>出错啦< 题意:给你一个整数n,每一次可以随机选择一个n的因子x(包括1和它自己),让n除以x——不停重复此过程,直到n==1. 问n被除到1的期望次数. 解题思路: 今天刚学的 ...

  2. X问题 HDU - 1573（excrt入门题）

    X问题 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  3. NODE&NPM

    Awesome npm packages 更新版本: Mac/Linux:npm install -g n && n stable (默认安装目录为:usr/local/local/n ...

  4. TP5调用微信JSSDK 教程 —— 之异步使用

    细节请参考前一篇文章:JSSDK.PHP 修改下: <?php namespace jssdk; class Jssdk { private $appId; private $appSecret ...

  5. PHP require php > 5.3.0

    项目版本要求 在5.3版本以上,如果是用 phpStudy 环境,那么直接切换版本即可

  6. pytorch搭建简单网络

    pytorch搭建一个简单神经网络 import torch import torch.nn as nn # 定义数据 # x:输入数据 # y:标签 x = torch.Tensor([[0.2, ...

  7. Before NOIP 2018

    目录 总结 刷题 2018 - 9 - 24 2018 - 9 - 25 2018 - 9 - 26 2018 - 9 - 27 2018 - 9 - 28 2018 - 9 - 29 2018 - ...

  8. 安卓Q | 诸多本地文件找不到？应用文件存储空间沙箱化适配指导

    上期我们针对Android Q 版本中对设备存储空间进行的限制.新特性变更引发的兼容性问题及原因分析推出了<安卓 Q | 8大场景全面解析应用存储沙箱化>文章,本期文章我们将手把手指导各位 ...

  9. 【UOJ#236】[IOI2016]railroad（欧拉回路，最小生成树）

    [UOJ#236][IOI2016]railroad(欧拉回路,最小生成树) 题面 UOJ 题解 把速度看成点,给定的路段看成边,那么现在就有了若干边,然后现在要补上若干边,以及一条\([inf,\) ...

  10. emwin之小键盘制作

    @2019-01-29 [小记] 小键盘的BUTTON控件由WINDOW控件组织,只需将所用BUTTON控件禁止聚焦即可. 小键盘的BUTTON控件由FRAMEWIN控件组织,将所用BUTTON控件禁 ...