打印及批量打印

开发十年，就只剩下这套架构体系了！ >>>   

总述：引入打印的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最前列增加复选框：

页面增加批量打印功能键：

    

        
    
    

        0/{{ count(当前页面数据的数组) }}
    
    

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("");
        });
    });
});