<!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. RMQ--ST表

    RMQ即区间最值查询,是指这样一个问题:对于长度为n的数列A,回答若干询问RMQ(A,i,j)(i,j<=n),返回数列A中下标在i,j之间的最小/大值. ST表既ST算法是一个非常有名的在线处 ...

  2. Codeforces Round #530 (Div. 2) F (树形dp+线段树）

    F. Cookies 链接:http://codeforces.com/contest/1099/problem/F 题意: 给你一棵树,树上有n个节点,每个节点上有ai块饼干,在这个节点上的每块饼干 ...

  3. MySQL免安装版，遇到MSVCR120.dll文件丢失错误的解决方案

    下载 VC redist packages for x64,下载完成,点击运行即可.

  4. HEOI2016解题报告

    树 在2016年,佳媛姐姐刚刚学习了树,非常开心.现在他想解决这样一个问题:给定一颗有根树(根为1),有以下 两种操作:1. 标记操作:对某个结点打上标记(在最开始,只有结点1有标记,其他结点均无标记 ...

  5. sublime text3 插件的安装

    ctrl + shift +p 打开搜索框界面 安装: 输入install package并回车,再在列表中选中所需要安装的插件,你会发现左下角正在显示安装.安装成功后,一般会打开插件说明. 卸载: ...

  6. oath2

    最近在补架构师图谱里的内容,OAuth2.0是其中一块,抽空看了几个文章,理解了一下. 不过我感觉多数文章都不是很直观,花费了好久才理解其中的过程,以及为什么要这么设计,也许里面还有一些为什么没搞清楚 ...

  7. 百度地图API示例：使用vue添加删除覆盖物

    1.index.html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2. ...

  8. 将本地html文件拖到IE8浏览器无法打开，直接弹出一个下载的对话框

    查看一下注册表[HKEY_CLASSES_ROOT\.htm]和[HKEY_CLASSES_ROOT\.html]的ContentType值是否都为“text/html”

  9. 怎么自行HTTP的POST包头，需要使用json

    http://bbs.csdn.net/topics/390674431 不理解你为什么这么传 post的格式如下:POST / HTTP/1.1Host: www.wrox.comUser-Agen ...

  10. 第六节，Neural Networks and Deep Learning 一书小节(下)

    4.神经网络可以计算任何函数的可视化证明 神经网络拥有一定的普遍性,即包含一个隐藏层的神经网络可以被用来按照任意给定的精度来近似任何连续函数. 这一章使用一个实例来阐述神经网络是如何来近似一个一元函数 ...