1.获取easyUI的table内容:
// printTitle打印任务名
// printDatagrid 要打印的datagrid
function CreateFormPage(printDatagrid,printTitle) {
var tableString ='<p class="printTitle">'+printTitle+'</P>'
tableString += '<table cellspacing="0" border="0" class="pb">';
var frozenColumns = printDatagrid.datagrid("options").frozenColumns; // 得到frozenColumns对象
var columns = printDatagrid.datagrid("options").columns; // 得到columns对象
//这里的判断根据自己项目实际情况来判断,需要就加上
// if(columns[0][0]['field']=="ck"){//判断table是否有全选一列,有的话去掉
// columns[0].splice(0,1);
// }
// if(columns[0][0]['field']=="id"){//判断table是否有id一列,有的话去掉
// columns[0].splice(0,1);
// }
// if(columns[0][0]['field']=="pm"){//判断table是否有排名一列,有的话去掉并替换新的key值
// columns[0][0]['field'] ="num";
// }
var nameList = '';
// 载入title
if (typeof columns != 'undefined' && columns != '') {
$(columns).each(function (index) {
tableString += '\n<tr>';
if (typeof frozenColumns != 'undefined' && typeof frozenColumns[index] != 'undefined') {
for (var i = 0; i < frozenColumns[index].length; ++i) {
if (!frozenColumns[index][i].hidden) {
tableString += '\n<th width="' + frozenColumns[index][i].width + '"';
if (typeof frozenColumns[index][i].rowspan != 'undefined' && frozenColumns[index][i].rowspan > 1) {
tableString += ' rowspan="' + frozenColumns[index][i].rowspan + '"';
}
if (typeof frozenColumns[index][i].colspan != 'undefined' && frozenColumns[index][i].colspan > 1) {
tableString += ' colspan="' + frozenColumns[index][i].colspan + '"';
}
if (typeof frozenColumns[index][i].field != 'undefined' && frozenColumns[index][i].field != '') {
nameList += ',{"f":"' + frozenColumns[index][i].field + '", "a":"' + frozenColumns[index][i].align + '"}';
}
tableString += '>' + frozenColumns[0][i].title + '</th>';
}
}
}
for (var i = 0; i < columns[index].length; ++i) {
if (!columns[index][i].hidden) {
tableString += '\n<th width="' + columns[index][i].width + '"';
if (typeof columns[index][i].rowspan != 'undefined' && columns[index][i].rowspan > 1) {
tableString += ' rowspan="' + columns[index][i].rowspan + '"';
}
if (typeof columns[index][i].colspan != 'undefined' && columns[index][i].colspan > 1) {
tableString += ' colspan="' + columns[index][i].colspan + '"';
}
if (typeof columns[index][i].field != 'undefined' && columns[index][i].field != '') {
nameList += ',{"f":"' + columns[index][i].field + '", "a":"' + columns[index][i].align + '"}';
}
tableString += '>' + columns[index][i].title + '</th>';
}
}
tableString += '\n</tr>';
});
}
// 载入内容
var rows = printDatagrid.datagrid("getRows"); // 这段代码是获取当前页的所有行
var count =0;//手动添加序号一列
for(var h =0;h<rows.length;h++){
count+=1;
rows[h]['num']=count;
}
var nl = eval('([' + nameList.substring(1) + '])');
for (var i = 0; i < rows.length; ++i) {
tableString += '\n<tr>';
$(nl).each(function (j) {
var e = nl[j].f.lastIndexOf('_0');
if(rows[i][nl[j].f]=="null"||rows[i][nl[j].f]==null){
rows[i][nl[j].f]="";
}
tableString += '\n<td';
if (nl[j].a != 'undefined' && nl[j].a != '') {
tableString += ' style="text-align:' + nl[j].a + ';"';
}
tableString += '>';
if (e + 2 == nl[j].f.length) {
tableString += rows[i][nl[j].f.substring(0, e)];
}
else
tableString += rows[i][nl[j].f];
tableString += '</td>';
});
tableString += '\n</tr>';
}
tableString += '\n</table>';
return tableString;
// var iWidth = 1500;
// var iHeight = 900;
// var iTop = (window.screen.availHeight - 30 - iHeight) / 2;
// var iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
// var oWin =window.open("print.html", "打印报表", "width=" + iWidth + ", height=" + iHeight + ",top=" + iTop + ",left=" + iLeft + ",toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no");
// if (oWin) {
// oWin.document.open();
// oWin.document.write(tableString);
// oWin.document.close();
// oWin.print();
// oWin.close();
// }
}
2.引入jQuery.print.js插件,这里提供一篇插件的具体使用说明的链接地址>>Jquery 打印插件——jQuery.print.js使用
3.接下来我们直接上代码,如何配合使用:
- 首先html页面引入插件及print.js
<script src="${path}/js/easyui/print/print.js"></script>
<script src="${path}/js/easyui/print/jQuery.print.js"></script>
- 页面中添加打印按钮,点击触发
<button class='layui-btn layui-btn-normal' id="print">打印</button>
- 接下来就是调用方法了
$("#print").on("click",function(){ //打印表格
var printTitle ="报表打印";
var printHtml = CreateFormPage( $('#table'),printTitle);//参数依次为表格ID和自定义的表格标题,最终获取到的为要打印的整个内容
$("#table").print({
globalStyles:true,//是否包含父文档的样式,默认为true
mediaPrint:true,//是否包含media='print'的链接标签。会被globalStyles选项覆盖,默认为false
stylesheet:null,//外部样式表的URL地址,默认为null
noPrintSelector:".no-print",//不想打印的元素的jQuery选择器,默认为".no-print"
iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口,true为在本页面进行打印,false就是说新开一个页面打印,默认为true
append:null,//将内容添加到打印内容的后面
prepend:printHtml,//将内容添加到打印内容的前面,可以用来作为要打印内容
deferred:
$.Deferred()//回调函数
});
})
//注意:globalStyles:true这里用于给打印的表格设置打印的表格样式,可以在父页面写入样式,这里设置为true就可以直接调用了