ie调用window.print批量打印数据表格。

来源:互联网 发布:leslie矩阵是什么 编辑:程序博客网 时间:2024/05/29 14:01

需求

  1. 根据勾选的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">                        &nbsp;&nbsp;&nbsp;&nbsp;                        <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()方法了;                    }                });            })        }