建议:
1、不需修改的页面可以用当前页局部打印。
案例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>datagrid-打印</title> <link rel="stylesheet" href="css/commonCss.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/easyui.css"> <link rel="stylesheet" href="css/treeHight.css"> <link href="css/font/iconfont.css" rel="stylesheet"> <style> .layout,.panel-fit, .panel-fit body{ overflow: auto; } .datagrid-body{ padding-bottom: 50px !important; } </style> </head> <body> <p><button οnclick="doPrint3();">打印</button></p> <!--startprint--> <div id="jxcon"> <div id="dg"></div> <div style="height: 30px;"></div> </div> <!--endprint--> <p><button οnclick="doPrint3();">打印</button></p> <script src="commonJs/jquery-1.11.2.min.js"></script> <script src="commonJs/jquery.easyui.min.js"></script> <script src="commonJs/common.js"></script> <script src="js/treeHight.js"></script> <script src="js/editDatagrid.js"></script> <script src="js/treeindex.js"></script> <script> var index1; $('#dg').datagrid({ iconCls: 'icon-edit', singleSelect: true, toolbar: '#tb', method: 'get', url:'json/editDatagrid.json', columns:[[ {field:'itemid',width:80}, {field:'productid',width:100, formatter:function(value,row){ return row.productname; }, editor:{ type:'combobox', options:{ valueField:'productid', textField:'productname', method:'get', data:[ {'productid':'FI-SW-01','productname':'Koi'}, {'productid':'K9-DL-01','productname':'Dalmation'}, {'productid':'RP-SN-01','productname':'Rattlesnake'}, {'productid':'RP-LI-02','productname':'Iguana'}, {'productid':'FL-DSH-01','productname':'Manx'}, {'productid':'FL-DLH-02','productname':'Persian'}, {'productid':'AV-CB-01','productname':'Amazon Parrot'} ] , required:true } } }, {field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}}, {field:'unitcost',width:80,align:'right',editor:'numberbox'}, {field:'attr1',width:250,editor:'textbox'}, {field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}}, {field:'opt',title:'操作', width:60,align:'center', formatter:function(value,row){ return "<span class='add'>增加</span><span class='del'>删除</span>"; },} ]], onLoadSuccess:function(data){ var merges = [{ index: 2, rowspan: 2 },{ index: 5, rowspan: 2 },{ index: 7, rowspan: 2 }]; for(var i=0; i<merges.length; i++){ $(this).datagrid('mergeCells',{ index: merges[i].index, field: 'itemid', rowspan: merges[i].rowspan }); } }, // onClickRow:onClickRow, onClickCell:function(index, field, value){ index1=index+1; console.log(index,field,value); } }); $("#jxcon").on("click",'span',function(e){ if($(e.target).hasClass('add')){ $('#dg').datagrid('insertRow',{ index: index1, // 索引从0开始 row: { itemid: ' ', productid: 30, listprice: ' ', unitcost: ' ', attr1: ' ', status: ' ', } }); }else{ $('#dg').datagrid('deleteRow',index1-1); }; }); </script> <script> function doPrint3(){ // 结束编辑 $('#dg').datagrid('endEdit', editIndex); // 隐藏操作列 $('#dg').datagrid('hideColumn', 'opt'); bdhtml=window.document.body.innerHTML; //获取当前页的html代码 sprnstr="<!--startprint-->"; //设置打印开始区域 eprnstr="<!--endprint-->"; //设置打印结束区域 prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //从结束代码向前取html window.document.body.innerHTML=prnhtml; //将html代码 放在页面上,方便打印 //打印之前设置IE打印时不打印页眉 、页脚 if (!!window.ActiveXObject || "ActiveXObject" in window) { remove_ie_header_and_footer(); } print.portrait = false ;//横向打印 //打印 window.print(); window.document.body.innerHTML=bdhtml; //打印完成后将html代码还原 }; //打印之前设置IE打印时不打印页眉 、页脚 function remove_ie_header_and_footer() { var hkey_root, hkey_path, hkey_key; hkey_path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; try { var RegWsh = new ActiveXObject("WScript.Shell"); RegWsh.RegWrite(hkey_path + "header", ""); //设置页眉为空 RegWsh.RegWrite(hkey_path + "footer", ""); //设置页脚为空 } catch (e) {} } </script> </body> </html>
2、涉及编辑功能的用iframe嵌套,打印子页面内容;
主要js
function doPrint(){ //判断iframe是否存在,不存在则创建iframe var iframe=document.getElementById("printIframe"); // var iframe2=document.getElementById("print-iframe"); if(!iframe){ var el = document.getElementById("printcontent"); iframe = document.createElement('IFRAME'); var doc = null; iframe.setAttribute("id", "print-iframe"); iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;'); document.body.appendChild(iframe); doc = iframe.contentWindow.document; //这里可以自定义样式 //doc.write("<LINK rel="stylesheet" type="text/css" href="css/print.css">"); doc.write('<div>' + el.innerHTML + '</div>'); doc.close(); iframe.contentWindow.focus(); } // 打印前操作 //结束行编辑 $("#printIframe")[0].contentWindow.endEditCell(); // 页面缩放,此处缩放为50%,不缩放的话页面超出就打印不出来,这个需要自己调试,看自己 iframe.style.zoom=0.5; iframe.contentWindow.print(); //打印完后的操作 //页面回复原比例大小 iframe.style.zoom=1; $("#printIframe")[0].contentWindow.endPrint(); if (navigator.userAgent.indexOf("MSIE") > 0){ document.body.removeChild(iframe); } }