开发十年,就只剩下这套架构体系了! >>>
总述:引入打印的JS文件,把需要打印的内容window.print()打印出来即可。注:print()可设置参数,如不需要打印的内容。
//打印 $("#print").click(function(e){ $(".box").print({ globalStyles: true, mediaPrint: false, stylesheet: null, noPrintSelector: ".no-print", iframe: true, append: null, prepend: null, manuallyCopyFormValues: true, deferred: $.Deferred() }); });
一、单页打印:
引入JS和添加打印JS代码:
页面添加打印按钮:
二、批量打印:
思路:获取到每个选中的复选框的值(如下图),用get同步请求拿回页面内容存入隐藏的div后,用该div的内容替换掉body中的所有内容进行打印,打印之后再换回原内容。
td最前列增加复选框:
页面增加批量打印功能键:
JS部分代码:
//批量打印功能 //单选后更新下面已选中的数量显示 $(document).on("click","input[name='sid']",function () { $("#sel_num").text($("[name=sid]:checkbox:checked").length); }); //全选/全不选功能 $(document).on("click",".all_ckx",function () { if ($(this).is(":checked")) { $("[name=sid]:checkbox").prop("checked", true); $("#sel_num").text($("[name=sid]:checkbox:checked").length); } else { $("[name=sid]:checkbox").prop("checked", false); $("#sel_num").text(0); } });
//批量打印功能按钮 获取到每个选中的复选框的值,用get同步请求拿回页面内容存入隐藏的div后,用该div的内容替换掉body中的所有内容进行打印,打印之后再换回原内容 $("#print").click(function(){ var index = layer.load(1); setTimeout(()=>{ //获取每个已选中的复选框的值并调用get同步请求回页面数据后,追加到隐藏的div中 $("input[name='sid']:checked").each(function(){ var sid = $(this).val(); var n=sid.indexOf('&'); var bid = sid.substring(0,n); var type = sid.substring(n+1); $.ajax({ async:false, type:'get', url:'{{ route("less_money") }}', data:{ bid:bid, type:type, bill_jump:1 }, success:function(data){ $("#js_print_content").append(''+data+''); $("#js_print_content").append(''); } }); }); if($('.leaf').length<=0){ layer.msg('请勾选需要打印的账单'); layer.close(index); return false; } //获取隐藏div中的内容 var newstr = $("#js_print_content").html(); //用隐藏的div中的内容替换掉当前页面上的内容 var oldstr = $("body").prop("outerHTML"); $("body").html(newstr); setTimeout(()=>{ //调用打印功能 window.print(); //返回之前的内容页面 location.reload(); //清空隐藏的div中的内容 $("#js_print_content").html(""); }); }); });