js动态加载table，打印table里的内容以及解决打印后的问题

最新推荐文章于 2024-08-09 02:16:38 发布

大海无量波涛凶

最新推荐文章于 2024-08-09 02:16:38 发布

阅读量5.6k

点赞数 2

分类专栏： javaweb

本文链接：https://blog.csdn.net/qq_37164847/article/details/80064180

版权

javaweb 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<body>
    <div>
        <div style="text-align: center;margin: 10px">
            姓名：<input type="text" id="pt_search_name" name="pt_search_name" style="width: 150px;height: 30px;border: 1px;" placeholder="请输入姓名" />
            <%--身份证号：<input type="text" id="pt_search_sfz" name="pt_search_sfz" style="width: 200px;height: 30px"/>--%>
            <button id="chaxun1" style="margin-left: 20px;height: 30px;">普通人才查询</button>
        </div>

        <div id="xinxi" style="margin: 10px">

        </div>
    </div>

//用来装打印的内容

<iframe id="iframe1" style="display: none"></iframe>

</body>

1.动态加载：

function loaddata(objs) {
    var datas=objs;
    var list = '';//列表
    var fragment = document.getElementById("xinxi");//定位到容器标签
    for(var i=0;i<datas.length;i++){
        list= document.createElement('div');//创建标签
        list.setAttribute("class","dayinbiao");
        // list.setAttribute("border",1);
        // list.setAttribute("align","center");
        // // list.setAttribute("text-align","center");
        // list.setAttribute("width","800px");
        // list.setAttribute("cellpadding","10px");
        // list.setAttribute("cellspacing","0px");
        //添加内容,设置属性
        list.innerHTML='<!--startprint--><table border="1" align="center" width="800px" cellspacing="0px" style="margin-top: 10px;"><caption style="font-size: 2em;">普通人才信息表</caption>' +
            '<tr><td>姓名</td><td >'+datas[i].name+'</td><td>身份证号</td><td colspan="5">'+datas[i].shenfenzheng+'</td></tr>' +
            '<tr><td>性别</td><td>'+datas[i].sex+'</td><td>出生日期</td><td>'+datas[i].birth+'</td><td>年龄</td><td>'+datas[i].age+'</td><td>民族</td><td>'+datas[i].minzu+'</td></tr>' +
            '<tr><td>婚姻状况</td><td>'+datas[i].hunyin+'</td><td>健康状况</td><td>'+datas[i].health+'</td><td>政治面貌</td><td>'+datas[i].political+'</td><td>身高</td><td>'+datas[i].height+'</td></tr>' +
            '<tr><td>毕业学校</td><td colspan="3">'+datas[i].school+'</td><td>所学专业</td><td colspan="3">'+datas[i].zuanye+'</td></tr>' +
            '<tr><td>籍贯</td><td colspan="3">'+datas[i].jiguan+'</td><td>毕业时间</td><td>'+datas[i].biye_time+'</td><td>学历</td><td>'+datas[i].xueli+'</td></tr>' +
            '<tr><td>联系</td><td>通讯地址</td><td colspan="3">'+datas[i].tongxun_dizhi+'</td><td>邮编</td><td colspan="2">'+datas[i].youbian+'</td></tr>' +
            '<tr><td>方式</td><td>手机号码</td><td colspan="3">'+datas[i].phone+'</td><td>宅电</td><td colspan="2">'+datas[i].home_phone+'</td></tr>' +
            '<tr><td>特长</td><td colspan="3">'+datas[i].techang+'</td><td>所获证书</td><td colspan="3">'+datas[i].zhengshu+'</td></tr>' +
            '<tr><td colspan="2">应聘岗位一</td><td colspan="2">'+datas[i].job1+'</td><td colspan="2">应聘岗位二</td><td colspan="2">'+datas[i].job2+'</td></tr>' +
            '<tr><td>应聘要求</td><td colspan="7">'+datas[i].yaoqiu+'</td></tr>' +
            '<tr><td>工作经历<span style="font-size: 0.6em;">(详细填写)</span></td><td colspan="7">'+datas[i].jingli+'</td></tr>' +
            '<tr><td>备注</td><td colspan="7">'+datas[i].beizhu+'</td></tr>' +
            '<tr><td>日期</td><td colspan="7">'+datas[i].dengji_time+'</td></tr></table><!--endprint-->'+
            '<button class="form1_dayin" style="width: 200px;height: 40px;margin-top: 10px;margin-left: 40%;">打印</button>';
        //添加子元素
        fragment.appendChild(list);
    }
}

2.点击打印按钮，实现打印：

$(document).on('click',".form1_dayin",function (e) {
        bdhtml=$(this).parents('.dayinbiao').html();
        //alert(bdhtml);
        sprnstr="<!--startprint-->"; //开始打印标识字符串有17个字符
        eprnstr="<!--endprint-->"; //结束打印标识字符串
        prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容
        prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
       // 生成并打印ifrme
        var iframe = document.getElementById("iframe1");
        var iwindow = iframe.contentWindow;//获取iframe的window对象
        iwindow.document.body.innerText = "";//先清空iframe原先的内容
        iwindow.document.write(prnhtml);
        iwindow.print(); //调用浏览器的打印功能打印指定区域
        // // window.document.body.innerHTML=bdhtml; // 最后还原页面
        // window.location.reload()

})