打印及批量打印

原创已于 2022-07-26 16:02:31 修改 · 4.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #前端

于 2019-02-15 16:49:00 首次发布

本文介绍了前端实现打印的两种方式：单页打印和批量打印。通过引入JS文件并调用window.print()方法，可以轻松实现单页打印。对于批量打印，文章提出了获取复选框值，通过同步请求获取页面内容，存储于隐藏div，然后替换body内容进行打印的思路，并展示了相关HTML和JS代码片段。

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

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