<!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. 洛谷P1216数字三角形题解

    题目 这道题是一个典型的DP,可以用倒推,顺推的方法,来解这道题.当然用不同的方法他的循环次序是不一样的,所以我们一定要深刻地理解题目的大意,再采用状态转移方程与边界每次求出最优解,并记录循环一遍后就 ...

  2. Leetcode 345. 反转字符串中的元音字母 By Python

    编写一个函数,以字符串作为输入,反转该字符串中的元音字母. 示例 1: 输入: "hello" 输出: "holle" 示例 2: 输入: "leet ...

  3. vue路由原理剖析

    单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见:  ...

  4. Hadoop集群的构建和安装

    1.安装Java $ yum install -y java-1.8.0-openjdk java-1.8.0-openjdk-devel 上述命令默认安装位置/usr/lib/jvm/java-1. ...

  5. linux/mac下一键删除下载失败的maven jar包

    echo 正在搜索... find . -name "*lastUpdated" | xargs rm -fr echo 搜索完毕

  6. java面试——jvm

    背景:用来总结java面试过程中与jvm相关的问题. 垃圾回收以及优化总结 <JVM 垃圾回收器工作原理及使用实例介绍> 介绍常用的垃圾回收算法,垃圾收集器,垃圾收集器相关的调试参数. J ...

  7. Vue+Django2.0 restframework打造前后端分离的生鲜电商项目（2）

    1.restful api介绍 1.前后端分离的优缺点 1.为什么要用前后端分离 1.pc.app.pad多端适应 2.SPA(单页面应用)开发模式开始流行 3.前后端分离职责不清 4.开发效率问题, ...

  8. MySQL事务，事务隔离级别详解

    1.什么是事务 指作为单个逻辑工作单元执行的一系列操作,要么完全地执行,要么完全地不执行. 2.事务的4个特性 原子性(Atomicity).一致性(Consistency).隔离性(Isolatio ...

  9. django框架中的全文检索Haystack

    1.什么是Haystack Haystack是django的开源全文搜索框架(全文检索不同于特定字段的模糊查询,使用全文检索的效率更高 ),该框架支持Solr,Elasticsearch,Whoosh ...

  10. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...