应需求,要把结算单直接在网页中打印出来。应显示效果如下所示:
使用extjs4.2,将上述信息显示在grid中,效果如下:
在实现打印功能的过程中存在以下想法:
1.初次实现时,是借助extjs的打印插件printer,引入js加以改善 ,将整个grid表格打印出来,效果如下:
问题:效果显然不对,由于数据过多过长,导致在当前页面下,无法显示完全,所以打印当前页面的grid只会打印部分内容。
2.第二想法,导入到excel后完成打印。excel表格中内容如下:
问题:存在一定的格式问题,且数据在表格中仍然过长,打印时会换行,导致数据与标题栏信息不对应,打印效果不对
3.第三想法,在js中重新编辑html,引入新的div及对应样式,使完成单子所显示效果。
效果如客户提供单子显示。
附关键代码:
{
text: '打印',
tooltip: 'print',
iconCls: 'print',
/*handler:printGrid,*/
listeners:{
'click':function(){
var record = grid.getSelectionModel().getSelection();
var group = [];
$.each(record, function(index) {
var lj = record[index].get("payList.payCustomerid")
+record[index].get("payList.payDepartment")
+record[index].get("payList.payReciever");
if (group.indexOf(lj)<0) {
group.push(lj);
}
});
var dayinc = '';
$.each(group, function(item) {
var key = group[item];
var filterarray = $.grep(record,function(value){
return key==value.get("payList.payCustomerid")
+value.get("payList.payDepartment")
+value.get("payList.payReciever");
});
dayinc += '<div style="width:1000px;">';
dayinc+='<style>';
dayinc+='table {table-layout:fixed;}';
dayinc+='td {padding-top:5px; padding-bottom:5px;word-wrap:break-word;}';
dayinc+='</style>';
dayinc+='<div style="margin: 10px auto; width:410px; font-size:20px;">';
dayinc+='中 煤 新 集 能 源 股 份 有 限 公 司 结 算 清 单</div>';
dayinc+='<div style=" clear:both; margin:15px auto;">';
dayinc+='<span style="float:left;">结算单位:'+filterarray[0].get("payList.payCustomerid")+'</span>';
dayinc+=' ';
dayinc+='<span>结算日期:'+filterarray[0].get("jiesuanDate")+'</span>';
dayinc+='<span style="float:right;">发运矿别:'+filterarray[0].get("payList.payDepartment")+'</span>';
dayinc+='</div>';
dayinc+='<div style="clear:both; margin:15px auto;">';
dayinc+='<span style="float:left;">收货单位:'+filterarray[0].get("payList.payReciever")+'</span>';
dayinc+='<span style="float:right;">编号:'+filterarray[0].get("payList.payBianhao")+' </span>';
dayinc+='</div>';
dayinc+='<div style=" clear:both;">';
dayinc+='<table border="1" style="border-collapse:collapse; width:750px;">';
dayinc+='<tr>';
dayinc+='<td style="width: 80px">发运日期</td>';
dayinc+='<td style="width: 35px">批号</td>';
dayinc+='<td style="width: 35px">车数</td>';
dayinc+='<td style="width: 70px">矿发吨位</td>';
dayinc+='<td style="width: 70px">出矿热值(卡/克)</td>';
dayinc+='<td style="width: 100px">单价(元/吨)</td>';
dayinc+='<td style="width: 85px">金额(元)</td>';
dayinc+='<td style="width: 120px">专用线费用(元)</td>';
dayinc+='<td style="width: 100px">小计(元)</td>';
dayinc+='<td style="width: 120px">机车运费(元)</td>';
dayinc+='<td style="width: 100px">运费总额(元)</td>';
dayinc+='<td style="width: 110px">合计</td>';
dayinc+='</tr>';
var gpayCount=0.0,gpayWeight=0.0,gpayTotal=0.0,gpayDedicated=0.0,
gpaySubtotal=0.0,gpayTrain=0.0,gpayTransport=0.0,gpaySummation=0.0;
$.each(filterarray, function(index) {
dayinc+='<tr>';
dayinc+='<td style="width:80px">'+filterarray[index].get("fayunDate")+'</td>';
dayinc+='<td style="width:35px">'+filterarray[index].get("payList.payPihao")+'</td>';
dayinc+='<td style="width:35px">'+filterarray[index].get("payList.payCount")+'</td>';
dayinc+='<td style="width:70px">'+filterarray[index].get("payList.payWeight")+'</td>';
dayinc+='<td style="width:70px">'+filterarray[index].get("payList.payCalorific")+'</td>';
dayinc+='<td style="width:100px">'+filterarray[index].get("payList.payPrice")+'</td>';
dayinc+='<td style="width:85px">'+filterarray[index].get("payList.payTotal")+'</td>';
dayinc+='<td style="width:120px">'+filterarray[index].get("payList.payDedicated")+'</td>';
dayinc+='<td style="width:100px">'+filterarray[index].get("payList.paySubtotal")+'</td>';
dayinc+='<td style="width:120px">'+filterarray[index].get("payList.payTrain")+'</td>';
dayinc+='<td style="width:100px">'+filterarray[index].get("payList.payTransport")+'</td>';
dayinc+='<td style="width:110px">'+filterarray[index].get("payList.paySummation")+'</td>';
dayinc+='</tr>';
gpayCount += filterarray[index].get("payList.payCount");
gpayWeight += filterarray[index].get("payList.payWeight");
gpayTotal += filterarray[index].get("payList.payTotal");
gpayDedicated += filterarray[index].get("payList.payDedicated");
gpaySubtotal += filterarray[index].get("payList.paySubtotal");
gpayTrain += filterarray[index].get("payList.payTrain");
gpayTransport += filterarray[index].get("payList.payTransport");
gpaySummation += filterarray[index].get("payList.paySummation");
});
dayinc+='<tr>';
dayinc+='<td style="width: 70px">合计</td>';
dayinc+='<td style="width:35px"></td>';
dayinc+='<td style="width:35px">'+gpayCount+'</td>';
dayinc+='<td style="width:70px">'+gpayWeight+'</td>';
dayinc+='<td style="width:70px"></td>';
dayinc+='<td style="width:100px"></td>';
dayinc+='<td style="width:85px">'+gpayTotal+'</td>';
dayinc+='<td style="width:120px">'+gpayDedicated+'</td>';
dayinc+='<td style="width:100px">'+gpaySubtotal+'</td>';
dayinc+='<td style="width:120px">'+gpayTrain+'</td>';
dayinc+='<td style="width:100px">'+gpayTransport+'</td>';
dayinc+='<td style="width:110px">'+gpaySummation+'</td>';
dayinc+='</tr>';
dayinc+='</table>';
dayinc+='</div>';
dayinc+='<div style=" clear:both;">';
dayinc+='<div style="float:left; margin-top:20px;">';
dayinc+='审批人:';
dayinc+=' ';
dayinc+='审核人:';
dayinc+=' ';
dayinc+='制表人:';
dayinc+=' ';
dayinc+='</div>';
dayinc+='</div>';
dayinc+='</div><br><br><br>';
});
var doc = document.getElementById("iframe").contentDocument || document.frames["iframe"].document;
var ii=document.getElementById("iframe")|| document.frames["iframe"];
doc.body.innerHTML = dayinc;
ii.focus();
ii.contentWindow.print();
}
}
}