<!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. Navicat再次激活

    换了个新电脑,上一次激活用的注册机老被杀掉,defender什么的都关了,不知道是谁在暗中保护我的电脑.. 上个激活参考:https://www.cnblogs.com/MC-Curry/p/9765 ...

  2. MT【262】一道常见错题

    若$f(x^2)$的定义域为$[-1,1]$,则函数$f(x)$的定义域为______ 设$a>0$构造$f(x)=\sqrt{x(1-x)(a+x)}$,此时$f(x^2)$的定义域为$[-1 ...

  3. BZOJ5262(容斥)

    题目描述 听着自己美妙的曲子,小Z进入了梦乡.在梦中,小Z仿佛又回到了自己纵横考场的年代.在梦中,小Z参加了一场 考试,这场考试一共有n道题,每道题的最终得分都是一个大于等于0的整数.然而醒来后,小Z ...

  4. 生命不息，折腾不止 ～ 旧PC改造之家庭影音

    前言引入 之前把在校园陪伴多年的旧电脑由Win装成了Linux,的确不卡了,基本上日常办公也够了(大项目还是吃不消,日常捣鼓倒是够了),然后把真正的工作游戏本也改成了Linux,那么旧电脑又变成闲置机 ...

  5. 为什么分布式一定要有redis?

    为什么分布式一定要有redis? 孤独烟 架构师小秘圈 昨天 作者:孤独烟 来自:http://rjzheng.cnblogs.com/ 1.为什么使用redis   分析:博主觉得在项目中使用red ...

  6. java 子类强转父类 父类强转子类

    Java 继承 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法,使得子类具有父类相同的行为. Java 子类强转父类 父类引用指向子类对象: jav ...

  7. return break continue的区别 js java

    return :结束函数的执行, return后面的所有代码都不再执行 break: 结束循环, 执行循环后面的代码(如果有的话) continue: 结束本次循环, 循环变量继续递增或递减, 开始下 ...

  8. QML-WebEngineView加载html(Echarts绘图）

    实现QML中运用webEngineView加载Echarts GitHub:八至 作者:狐狸家的鱼 本文链接:QML-WebEngineView加载Echarts 一.前言 Qt允许使用混合GUI创建 ...

  9. 【洛谷P2585】三色二叉树

    题目大意:给定一个二叉树,可以染红绿黄三种颜色,要求父节点和子节点的颜色不同,且如果一个节点有两个子节点,那么两个子节点之间的颜色也不同.求最多和最少有多少个节点会被染成绿色. 题解:加深了对二叉树的 ...

  10. 使用postman测试dubbo服务层的方法

    下面的项目用的是servlet3.0架构 接口(doubbo消费者项目和服务者项目共享的jar项目中): package serviceinvoke; import com.alibaba.dubbo ...