打印及批量打印

总述：引入打印的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代码：

<script type="text/javascript" src="{{ asset('js/jQuery.print.js') }}"></script>
<script>
//打印
$("#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()
});
});
</script>
页面添加打印按钮：

<input class="no-print" type="button" id="print" value="打印" style="position:absolute;left:720px;top:20px;border:none;background-color:#4eb1e2;color:#FFF;width:60px;border-radius:4px;font-size:16px;margin-bottom:5px">
二、批量打印：

思路：获取到每个选中的复选框的值（如下图），用get同步请求拿回页面内容存入隐藏的div后，用该div的内容替换掉body中的所有内容进行打印，打印之后再换回原内容。

 

td最前列增加复选框：

<td><input type="checkbox" name="sid" value="你请求路由需要的值"></td>
页面增加批量打印功能键：

<div id="js_print_content" style="display:none"></div>
<div class="mt20">
<div>
<input class="all_ckx" type="checkbox">
</div>
<div style="float:left;overflow: hidden;">
<span><span id="sel_num">0</span>/{{ count(当前页面数据的数组) }}</span>
</div>
<input type="button" id="print" class="printBtn" value="批量打印">
</div>
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('<div style="page-break-after:always;">'+data+'</div>');
$("#js_print_content").append('<link rel="stylesheet" href="{{ asset('css/settle.css') }}">');
}
});
});
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("");
});
});
});
————————————————
版权声明：本文为CSDN博主「guozhouyuan」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qvanminpiao/article/details/88892671