总述:引入打印的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("");

});

});

});