<!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. 「CodeForces - 50C 」Happy Farm 5 （几何）

    BUPT 2017 summer training (16) #2B 题意 有一些二维直角坐标系上的整数坐标的点,找出严格包含这些点的只能八个方向走出来步数最少的路径,输出最少步数. 题解 这题要求严 ...

  2. [NOIp2012] 国王游戏（排序 + 贪心 + 高精度）

    题意 给你两个长为 \(n+1\) 的数组 \(a,b\) ,你需要定义一个顺序 \(p\) (\(p_0\) 永远为 \(0\)) 能够最小化 \[ \max_{i=1}^{n} \frac{\pr ...

  3. Centos7安装OpenDCIM-19.01步骤

    Centos7安装OpenDCIM-19.01步骤 openDCIM是一款免费的开源解决方案,用于管理数据中心基础设施.它已经被几家企业组织所使用,由于开发人员的不懈努力,正在迅速完善. openDC ...

  4. 【BZOJ5470】[FJOI2018]所罗门王的宝藏（）

    [BZOJ5470][FJOI2018]所罗门王的宝藏() 题面 BZOJ 洛谷 有\(n+m\)个变量,给定\(k\)组限制,每次告诉你\(a_i+b_j=c_k\),问是否有可行解. 题解 一道很 ...

  5. 编写高质量代码:改善Java程序的151个建议 --[98~105]

    建议的采用顺序是List中泛型顺序依次为T.?.Object (1).List是确定的某一个类型 List表示的是List集合中的元素都为T类型,具体类型在运行期决定:List<?>表示的 ...

  6. Java 破解谷歌翻译api，可以实现程序自动化翻译文章

    1  原理:查看谷歌翻译网站,输入需要翻译的文字,选择语言得到翻译后的文字,发送异步请求参数返回结果.java使用httpclient发送请求,实现使用代码翻译文章的功能. 2  下载代码后,测试入口 ...

  7. Linux下设置VSCode为默认的文本编辑器

    解决方法 执行一下命令 xdg xdg-mime default code.desktop text/plain Debian alternatives system sudo update-alte ...

  8. Java IO流篇

    什么是IO流 思考问题 如何读写文件? 解决--通过流读写文件 流是指一连串流动的字符,以先进先出传输信息的通道. Java操控硬盘上的文件,通过IO流来实现 Java流的分类 按流向区分 ---输出 ...

  9. 表格中的checkbox复选框 全选非全选 公共方法 及提交选中结果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  10. jquery+ajax无刷新加载数据，新闻浏览更多

      <script type="text/javascript"> $(document).ready(function (){ $(window).scroll(fu ...