Table iframe分页打印

最新推荐文章于 2024-06-04 09:35:08 发布
最新推荐文章于 2024-06-04 09:35:08 发布
阅读量812 收藏 1
点赞数
分类专栏： 导出 JS 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_28238111/article/details/105686448
版权
JS 同时被 2 个专栏收录
4 篇文章 0 订阅
订阅专栏
导出
2 篇文章 0 订阅
订阅专栏 

<%@ page language="java" contentType="text/html;charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="${ctx}/static/css/archive.css"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="icon" href="${ctx}/static/assets/favicon.png" type="image/x-icon"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <title>个人档案</title>
    <script>window.routerBase = "/";</script>
    <script src="${ctx}/static/js/jquery.js"></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) + 25); //从开始代码向后取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>
    <script>

        var pageSize = 16;    //每页显示的记录条数
        var curPage=0;        //当前页
        var lastPage;        //最后页
        var direct=0;        //方向
        var len;            //总行数
        var page;            //总页数
        var begin;
        var end;


        document.onreadystatechange = function () {
            if (document.readyState === "complete") {
                var data = ${data};
                const {info, study, work, family, hj, kh} = data;
                if (info.avatar && info.avatar.length > 0) {
                    let url = "${ctx}" + info.avatar;
                    document.getElementById('avatar').style.backgroundImage = "url(" + url + ")";
                    delete info.avatar;
                }
                for (let key in info) {
                    let t = document.getElementById(key);
                    if (t) {
                        t.innerHTML = info[key];
                    }
                }

                if (study.length > 0) {
                    $("#study_td").append(pageInfo(study));//学历
                } else {
                    document.getElementById("study").style.display = "none";
                }

               if (work.length > 0) {
                    $("#work_td").append(pageWorkInfo(work));//工作简历
                } else {
                    document.getElementById("work").style.display = "none";
                }

                     if (family.length > 0) {
                        $("#family_td").append(pageFamilyInfo(family));//家庭成员关系
                    } else {
                        document.getElementById("family").style.display = "none";
                    }

                    if (hj.length > 0) {
                        $("#hj_td").append(pageHjInfo(hj));//奖惩情况
                    } else {
                        document.getElementById("hj").style.display = "none";
                    }

                    if (kh.length > 0) {
                        $("#kh_td").append(pageKhInfo(kh));//年度考核
                    } else {
                        document.getElementById("kh").style.display = "none";
                    }

                len =$("#mytable tr").length;    // 求这个表的总行数，剔除第一行介绍
                page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根据记录条数，计算页数
                alert("len=="+len+",page==="+page);
                curPage=1;    // 设置当前为第一页
                displayPage(1);//显示第一页


                    $("#btn2").click(function frontPage(){    // 上一页
                        direct=-1;
                        displayPage();
                    });
                    $("#btn3").click(function nextPage(){    // 下一页
                        direct=1;
                        displayPage();
                    });

            }
        }

        function displayPage(){
            if(curPage <=1 && direct==-1){
                direct=0;
                alert("已经是第一页了");
                return;
            } else if (curPage >= page && direct==1) {
                direct=0;
                alert("已经是最后一页了");
                return ;
            }

            lastPage = curPage;

            // 修复当len=1时，curPage计算得0的bug
            if (len > pageSize) {
                curPage = ((curPage + direct + len) % len);
            } else {
                curPage = 1;
            }



            begin=(curPage-1)*pageSize + 1;// 起始记录号
            end = begin + 1*pageSize - 1;    // 末尾记录号


            if(end > len ) end=len;
            $("#mytable tr").hide();    // 首先，设置这行为隐藏
            console.log("begin=="+begin+",end=="+end)
            $("#mytable tr").each(function(i){    // 然后，通过条件判断决定本行是否恢复显示
                if((i>=begin && i<=end) || (begin==1 && i==0) )//显示begin<=x<=end的记录
                    $(this).show();
            });

        }


        function pageInfo(list) {
            let s = ''
            for (var i = 0; i < list.length; i++) {
                s += cell(list[i])
            }
            return s;
        }

        //学历
        function cell(data) {
            let s = '<tr>\n' +
                ' <td style="height: 12mm">开始时间</td>\n' +
                ' <td colspan="2"> ' + data.ksdate + '</td>\n' +
                ' <td >学历</td>\n' +
                '   <td >' + data.xl + ' </td>\n' +
                '</tr>\n' +
                '<tr>\n' +
                ' <td style="height: 12mm">结束时间</td>\n' +
                ' <td colspan="2"> ' + data.jsdate + '</td>\n' +
                ' <td >学位</td>\n' +
                '   <td >' + data.xw + ' </td>\n' +
                '</tr>\n' +
                '<tr>\n' +
                ' <td style="height: 12mm">毕业院校</td>\n' +
                ' <td colspan="2"> ' + data.school + '</td>\n' +
                ' <td >专业</td>\n' +
                '   <td >' + data.zy + ' </td>\n' +
                '</tr>\n';
            return s;
        }


        function pageWorkInfo(list) {
            let s = ''
            for (var i = 0; i < list.length; i++) {
                s += workCell(list[i])
            }
            return s;
        }

        //工作简历
        function workCell(data) {
            let s = '<tr>\n' +
                ' <td style="height: 12mm">开始时间</td>\n' +
                ' <td > ' + data.ksdate + '</td>\n' +
                ' <td >结束时间</td>\n' +
                '   <td colspan="2">' + data.jsdate + ' </td>\n' +
                '</tr>\n' +
                '<tr>\n' +
                ' <td style="height: 12mm">工作单位</td>\n' +
                ' <td > ' + data.gzdw + '</td>\n' +
                ' <td >工作岗位</td>\n' +
                '   <td colspan="2">' + data.gzgw + ' </td>\n' +
                '</tr>\n' +
                '<tr>\n' +
                ' <td style="height: 12mm">系统职级</td>\n' +
                ' <td colspan="4"> ' + data.xcmc + '</td>\n' +
                '</tr>\n';
            return s;
        }

        //家庭成员及社会关系
        function pageFamilyInfo(list) {
            let s = ''
            for (var i = 0; i < list.length; i++) {
                s += familyCell(list[i])
            }
            return s;
        }

        function familyCell(data) {
            let s = '<tr>\n' +
                ' <td style="height: 12mm">姓名</td>\n' +
                ' <td colspan="2"> ' + data.xm + '</td>\n' +
                ' <td >出生年月</td>\n' +
                '   <td >' + data.csrq + ' </td>\n' +
                '</tr>\n' +
                '<tr>\n' +
                ' <td style="height: 12mm">关系</td>\n' +
                ' <td colspan="2"> ' + data.gx + '</td>\n' +
                ' <td >学历</td>\n' +
                '   <td >' + data.xlmc + ' </td>\n' +
                '</tr>\n' +
                '<tr>\n' +
                ' <td style="height: 12mm">工作单位</td>\n' +
                ' <td colspan="2"> ' + data.gzdw + '</td>\n' +
                ' <td >政治面貌</td>\n' +
                '   <td >' + data.zzmc + ' </td>\n' +
                '</tr>\n';
            return s;
        }


        //奖惩情况
        function pageHjInfo(list) {
            let s = ''
            for (var i = 0; i < list.length; i++) {
                s += hjCell(list[i])
            }
            return s;
        }

        function hjCell(data) {
            let s = '<tr>\n' +
                ' <td style="height: 12mm">类型</td>\n' +
                ' <td > ' + data.lxmc + '</td>\n' +
                ' <td >时间</td>\n' +
                '   <td colspan="2">' + data.rq + ' </td>\n' +
                '</tr>\n' +
                '<tr>\n' +
                ' <td style="height: 12mm">具体描述</td>\n' +
                ' <td colspan="4"> ' + data.mc + '</td>\n' +
                '</tr>\n';
            return s;
        }

        //年度考核
        function pageKhInfo(list) {
            let s = ''
            for (var i = 0; i < list.length; i++) {
                s += khCell(list[i])
            }
            return s;
        }

        function khCell(data) {
            let s = '<tr>\n' +
                ' <td style="height: 12mm">考核时间</td>\n' +
                ' <td colspan="2"> ' + data.rq + '</td>\n' +
                ' <td >对应年度</td>\n' +
                '   <td >' + data.jdmc + ' </td>\n' +
                '</tr>\n' +
                '<tr>\n' +
                ' <td style="height: 12mm">考核结果</td>\n' +
                ' <td > ' + data.idmc + '</td>\n' +
                ' <td >备注</td>\n' +
                '   <td colspan="2">' + data.remark + ' </td>\n' +
                '</tr>\n';
            return s;
        }
    </script>
</head>
<!--startprint1-->
<body>
<div class="main">
    <div class="title">街道个人档案</div>
    <table  id="mytable" class="root" style="margin: auto;width: 80%" border="1px" cellspacing="0" cellpadding="0">
        <tbody>
        <tr>
            <td style="width: 20%; height: 12mm">姓名</td>
            <td style="width: 20%" id="xm"></td>
            <td style="width: 20%">性别</td>
            <td style="width: 20%" id="fm"></td>
            <td style="width: 20%; padding: 0" rowspan="4" class="avatar">
                <img class="avatar" alt="avatar" id="avatar" src="${ctx}/static/assets/default_sign_bg.png"/>
            </td>
        </tr>
        <tr>
            <td style="height: 12mm">民族</td>
            <td id="mz"></td>
            <td>档号</td>
            <td id="dh"></td>
        </tr>
        <tr>
            <td style="height: 12mm">最高学历</td>
            <td id="xl"></td>
            <td>最高学位</td>
            <td id="xw"></td>
        </tr>
        <tr>
            <td style="height: 12mm">部门</td>
            <td colspan="3" id="bm"></td>
        </tr>
        <tr>
            <td style="height: 12mm">现职务</td>
            <td colspan="2" id="zw"></td>
            <td>现职务时间</td>
            <td id="zwsj"></td>
        </tr>
        <tr>
            <td style="height: 12mm">系统职级</td>
            <td id="zc" colspan="4"></td>
        </tr>
        <tr>
            <td style="height: 12mm">技术职称</td>
            <td id="zchen" colspan="4"></td>
        </tr>
        <tr>
            <td style="height: 12mm">现职级时间</td>
            <td id="zcdate"></td>
            <td>职称描述</td>
            <td id="zcms" colspan="2"></td>
        </tr>
        <tr>
            <td style="height: 12mm">编制职级</td>
            <td id="xz" colspan="2"></td>
            <td>出生年月</td>
            <td id="csdate"></td>
        </tr>
        <tr>
            <td style="height: 12mm">政治面貌</td>
            <td id="zz" colspan="2"></td>
            <td>入党时间</td>
            <td id="rddate"></td>
        </tr>
        <tr>
            <td style="height: 12mm">参加工作时间</td>
            <td id="gzdate"></td>
            <td>服务长芦时间</td>
            <td id="dwsj" colspan="2"></td>
        </tr>
        <tr>
            <td style="height: 24mm" rowspan="2">合同单位</td>
            <td colspan="2" rowspan="2" id="htdw"></td>
            <td style="height: 12mm">首次合同时间</td>
            <td id="htdate1"></td>
        </tr>
        <tr>
            <td style="height: 12mm">最近合同时间</td>
            <td id="htdate2"></td>
        </tr>
        <tr>
            <td style="height: 12mm">手机号码</td>
            <td colspan="2" id="phone"></td>
            <td>电话号码</td>
            <td id="tel"></td>
        </tr>
        <tr>
            <td style="height: 14mm">出生地</td>
            <td colspan="4" id="csd"></td>
        </tr>
        <tr>
            <td style="height: 14mm">籍贯</td>
            <td colspan="4" id="jg"></td>
        </tr>
        <tr>
            <td style="height: 14mm">家庭住址</td>
            <td colspan="4" id="home"></td>
        </tr>


        <tr>
            <td colspan="5" style="height: 10mm; font-weight:bold;text-align:center" id="study">学 历</td>
        </tr>

        <tbody id="study_td">
        </tbody>

        <tr>
            <td colspan="5" style="height: 10mm; font-weight:bold;text-align:center" id="work">工作简历</td>
        </tr>
        <tbody id="work_td">
        </tbody>

        <tr>
            <td colspan="5" style="height: 10mm; font-weight:bold;text-align:center" id="family">家庭成员及社会关系</td>
        </tr>
        <tbody id="family_td">
        </tbody>

        <tr>
            <td colspan="5" style="height: 10mm; font-weight:bold;text-align:center" id="hj">奖惩情况</td>
        </tr>
        <tbody id="hj_td">
        </tbody>

        <tr>
            <td colspan="5" style="height: 10mm; font-weight:bold;text-align:center" id="kh">年度考核</td>
        </tr>
        <tbody id="kh_td">
        </tbody>


        </tbody>
    </table>


</div>
</body>
<!--endprint1-->
<a  href="#" id="btn2">上一页</a>
<a  href="#" id="btn3">下一页</a>
<button style="position: absolute; top: 20px; right: 20px; color: white; background: blue" onclick="preview(1)">打印
</button>
</html>

 

粗糙的汉子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
打印iframe页面（兼容IE8和谷歌）
qq_33172029的博客
05-06 3160
情况：为了打印出其他iframe页面内容，而我的情况，则是打印出同一个tomcat下的其他应用程序的页面（此处可以操作其他页面的window，是由于没有跨域问题，如果是跨域问题的话，除非两边都能有权限设置，否则GG，而现在再同一个tomcat下，所以IP和端口号都一致，无跨域问题。） 代码： //打印简历 function printResume(){ var resumeWind...
使用iframe进行分页查询
07-29
NULL 博文链接：https://wisdom007.iteye.com/blog/828017
前端实现打印1 - 使用 iframe 实现 并 分页打印
工作中遇到问题记录
08-03 1197
借助 iframe 实现打印并分页打印
打印分页网页的所有内容（iframe标签里面的内容）
最新发布
zd1320732的专栏
06-04 182
【代码】打印分页网页的所有内容（iframe标签里面的内容）
frameset iframe用来分页
weixin_33738578的博客
11-12 310
frameset用来分大的框架 iframe用来在frame分框架之后，内嵌分割。 <FRAMESET border=1 frameSpacing=1 borderColor=#47478d rows="100,*" cols="*"> <frame src="head.jsp" name="head" scrolling=no id="head"&g...
layui的表格table选中数据后可打印本行数据
10-26
layui的table模块提供了一种动态加载、分页和自定义操作的方法。在HTML中，你需要创建一个`<table>`元素，并通过layui的JS代码对其进行初始化。例如： ```html <table id="demo" lay-filter="test"></table> ``` ...
jquery.PrintArea.js-2.4.0-打印功能.rar
08-31
mode: "iframe", // 默认模式，还有"popup"可选 type: "html", // 默认类型，也可以是"css" extraCss: "body { font-size: 12px; }", // 添加额外CSS target: "_blank", // 打印窗口打开方式 cancelLabel: ...
layui列表分页+添加修改！！！
05-13
接下来，使用layui的table组件来创建列表，并在JavaScript中设置分页： ```javascript layui.use(['table', 'laypage'], function(){ var table = layui.table; var laypage = layui.laypage; // 数据接口，...
echarts和dataTable的结合使用查询数据
07-01
4. **iframe通信**：如果`echarts`和`dataTable`位于不同的iframe中，我们需要利用`postMessage`和`message`事件进行跨窗口通信，确保数据的同步。 5. **优化用户体验**：为了提供更好的交互体验，可以考虑在用户...
layui后台管理系统完整版免费版本
05-22
2. **表格（Table）**：提供数据展示和操作的组件，支持分页、排序、筛选等功能。 3. **表单（Form）**：用于创建各种表单，包括输入框、选择器、开关、日期选择等元素。 4. **按钮（Button）**：提供多种样式的按钮...
jQuery 网页打印组件升级版（支持打印 iframe 内的内容）
10-29
jQuery 网页打印组件升级版（支持打印 iframe 内的内容） 只需要在参数中设置 isFrame: true 即可，此参数默认为 false
js调用iframe实现打印页面内容的方法
12-12
1、程序说明1) 此程序可以实现选择页面中的区域进行打印，以iframe方式进行打印；2) 与原生态的print() 区别在于，取消打印页面后可以完整保留当前访问页面的内容。2、代码部分 1) JS 函数： 代码如下:function do_print(id_str)//id-str 打印区域的id{var el = document.getElementById(id_str);var iframe = document.createElement(‘IFRAME’);var doc = null;iframe.setAttribute(‘style’, ‘position:absolut
JS操作Iframe获取到Iframe中的内容+ListView+DataPager分页
爱我所爱，无处不在
11-12 3621
window.onload = function () { var txt = document.getElementById("txtShowIframe"); txt.onmousedown = function () { document.getElementById("div_showIfrmae").styl
html中iframe显示多个子页面
wulong710的专栏
09-16 4460
html中iframe显示多个子页面 参考：https://www.runoob.com/html/html-iframes.html go.html <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="charset=utf-8; text/html" /> <title>显示框架</title> <base href
打印完整的带iframe的方法
清风的专栏
02-24 1469
//动态设置iframe的高度function SetWinHeight(obj)  {  var gerenadmin=obj;  if (document.getElementById)  {     if (gerenadmin && !window.opera)     {      if (gerenadmin.contentDocument && gerenadmin.contentD
第九节使用iframe展示列表带分页
zjltianxin的博客
11-02 167
效果图。
JavaScript 网页打印预览，图片跨页分割
weixin_44240581的博客
03-17 985
开始时是这样的， 打印的控件是用iframe写的，图片用js一张张插入到div中，遇到的问题是长图片跨页分割，短图片挤在一页 解决方法 // 插入图片方法 function addImg() { var imgDiv = document.getElementById('imgDiv'); imgDiv.setAttribute('style', 'overflow:hidden'); for (var i = 0; i < imgArray.leng
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值