ie调用window.print批量打印数据表格。
来源:互联网 发布:leslie矩阵是什么 编辑:程序博客网 时间:2024/05/29 14:01
需求
根据勾选的checkbox,一次将数据打印出来。
注意
1,我第一次是用循环一次一次调用window.print方法,想把数据一张一张打出来。结果因为输入输出流的问题,这样是一个死路。
取巧的思路
1.一条数据就写入到一张表格中,写个隐藏的div,把得到的表格不到追加到div中,把这个div标记为打印区域,最后表格追加完成后调用window.print方法打印这个div区域。
2.首先我把一张表格Table的大小设定成为了一张a4纸大小。所以取巧不用考虑打印的分页,页面设置参数什么的。
表格代码:
<div id="repairBillDiv" style="display:none;text-align: center"> <table class="repairBill" border="1" cellpadding="0" cellspacing="0" height="900" width="630"> <tbody> <caption style="text-align:center;"><h3>软件维护记录单</h3></caption> <tr> <td colspan="4"> 编号: <lable class="eventCodeTB"></lable> </td> </tr> <tr> <td width="25%">申告部门</td> <td width="30%"> <lable class="declareDeptNameChainTB"></lable> </td> <td width="17%">申告人</td> <td> <lable class="declareStaffNameTB"></lable> </td> </tr> <tr> <td>维护类型</td> <td colspan="3"> <lable class="eventServiceNameChainTB"></lable> </td> </tr> <tr> <td colspan="4" height="320"> <p>问题描述:</p> <div style="min-height:250px"> <lable class="eventDescTB"></lable> </div> <p align="right" style="margin-right: 100px;">记录人: <lable class="declareStaffNameTBTB"></lable> </p> </td> </tr> <tr> <td colspan="4" height="320"> <p>处理过程及完成情况: <lable class="operDescTB"></lable> </p> <div style="min-height:90px"> </div> <p>遗留问题:</p> <div style="min-height:90px"> </div> <p align="right" style="margin-right: 100px;">处理人: <lable class="currentStaffNameTB"></lable> </p> </td> </tr> <tr> <td>工作量(人/时)</td> <td></td> <td>日期</td> <td></td> <tr> <td>用户签字</td> <td></td> <td>日期</td> <td></td> </tr> </tbody> </table> </div>
下面是我要打印的div区域:
<div id="buckPrintDiv" style="display: none;"></div>
给表格赋值的方法
1.注意要写回调函数callback和判断是否结束,否则总是第一次得不到数据或者得到的都是同一条数据。
2. $j(“#repairBillDiv .declareDeptNameChainTB”).eq(0).text(declareDeptNameChain);//这里都用到了eq(0),
是因为循环给表格赋值的时候,我是固定给第一个表格赋值,然后把第一个表格追加到隐藏div中去的,在不断追加过程中,div中的表格除了写入的数据不同,其他都一样,为了追加和区分,不能设置id,因为在赋值和追加表格的过程中id会重复,所有都给class属性。
//给表格赋值 function printRepairBill(id, callback) { EHM.Ajax({ url: EHM.rootPath + "/event/printEventDetail.do?bizId=" + id, type: "get", dataType: "json", success: function (obj) { var eventPO = JSON.parse(obj); var declareDeptNameChain = eventPO.declareDeptNameChain;//申告部门 declareDeptNameChain var declareStaffName = eventPO.declareStaffName//申告人 declareStaffNameTB var eventDesc = eventPO.eventDesc//事件描述 eventDescTB var eventCode = eventPO.eventCode//编号 var currentStaffName = eventPO.currentStaffName;// 处理人 currentStaffNameTB var lastOperationTime = eventPO.lastOperationTime;// 最后日期 currentStaffNameTB lastOperationTime var eventReason = eventPO.eventReason;// 事件原因 eventReason var operDesc = eventPO.operDesc;// 处理过程 operDesc var eventServiceNameChain = eventPO.eventServiceNameChain;// 服务目录(维护类型) eventServiceNameChain $j("#repairBillDiv .declareDeptNameChainTB").eq(0).text(declareDeptNameChain); $j("#repairBillDiv .declareStaffNameTB").eq(0).text(declareStaffName); $j("#repairBillDiv .declareStaffNameTBTB").eq(0).text(declareStaffName); $j("#repairBillDiv .eventDescTB").eq(0).text(eventDesc); $j("#repairBillDiv .eventCodeTB").eq(0).text(eventCode); $j("#repairBillDiv .currentStaffNameTB").eq(0).text(currentStaffName);// $j("#lastOperationTimeTB").text(lastOperationTime);// $j("#lastOperationTimeTBTB").text(lastOperationTime); $j("#repairBillDiv .operDescTB").eq(0).text(operDesc);//处理过程 $j("#repairBillDiv .eventServiceNameChainTB").eq(0).text(eventServiceNameChain);//服务目录 callback();//***一定要写这个回调*** }, failure: function (status) { alert("打印失败"); return; } }); }
向div中追加表格
1.过程:ajax得到数据,给id = repairBill的Table赋值,把这个Table追加到要打印的div中。
2.buckPrintDiv 是最后要批量打印的div, repairBillDiv 是赋值的表格存在的div。
追加部分 的代码:
var div_tables = $j("#buckPrintDiv .repairBill");//要打印的buckPrintDiv中repairBill表格是否存在 var tmpTable = $j("#repairBillDiv .repairBill").eq(0);//赋值的div中的那个表格 if (div_tables.length == 0) { $j("#buckPrintDiv").html(tmpTable[0].outerHTML);//把赋值的表格写入到要打印的buckPrintDiv中; } else { div_tables.eq(div_tables.length - 1).after(tmpTable[0].outerHTML);//把赋值的表格追加到要打印div的最后 }
批量打印的全部方法
注意:要判断是第几个表格。
//批量打印 function bulkPrint() { $j("#buckPrintDiv").empty();//先把要打印的div中内容清空。 var checkedBox = $j(".checkbox:checked");//得到选中的checkbox var count = 0;//用于结束时的判断,ajax回调 checkedBox.each(function () { var bizId = $j(this).val();//传入id后的用于下面赋值方法后台获得数据 //下面给表格赋值 printRepairBill(bizId, function () { count++; var div_tables = $j("#buckPrintDiv .repairBill"); var tmpTable = $j("#repairBillDiv .repairBill").eq(0); if (div_tables.length == 0) { $j("#buckPrintDiv").html(tmpTable[0].outerHTML); } else { div_tables.eq(div_tables.length - 1).after(tmpTable[0].outerHTML); } if (count == checkedBox.length) { $j("#buckPrintDiv").printArea();//获得打印区域,这个要引入jquery.PrintArea.min.js,因为我设置的表格大小就是一张A4纸大小,所以打印时会自动分好页码。 //不需要window.print()方法了; } }); }) }
阅读全文
1 0
- ie调用window.print批量打印数据表格。
- ie window.print(); 打印总结
- window.print打印网页
- window.print 页面打印
- window.print分页打印
- web打印 window.print()
- window.print()打印功能
- web打印window.print
- window.print 页面打印
- window.print 页面打印
- window.print()页面打印之表格内容分页填充进行分页打印
- 网页打印javascript:window.print()
- window.print()打印指定区域
- window.print()打印页面部分内容
- javascript:window.print() 打印--(转载)
- 网页打印javascript:window.print()
- window.print()打印页面部分内容
- window.print打印指定div
- 预处理、结构体
- [2017纪中10-26]摘Galo 树型背包
- 冒泡排序
- Java中的常用转义字符
- 寻找无向图中所有存在的环-删除点法
- ie调用window.print批量打印数据表格。
- 线形表的问题
- spring aop的实现原理----其中之一的jdk代理
- codeforces #320 div 2A
- 使用SpringCloud搭建微服务<三>---------使用EureKa编写服务的注册中心
- 作用域闭包四五章及附录
- caffe编译安装( Ubuntu16.04.3+cuda8.0+opencv3.3.0+anaconda3)
- 进程间通讯
- .net HttpWebRequest使用代理请求