• 打印及批量打印


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

  • 相关阅读:
    如何复制保存阿里巴巴的图片。
    如何在windows2003(IIS6)下配置IIS,使其支持cshtml
    数据库字符串加法,目前没成功
    使用ASP.NET AJAX与Bootstrap 弹窗解决方案
    在MyBatis中采用模糊查询变量的引用标志应当是$而不是#
    如何让SpringBoot工程在log/控制台中实时打印MyBatis执行的SQL语句
    雇员信息完全分页方案
    将雇员信息分页显示
    把Employees显示在页面上
    给EmpMapper开放Restful接口
  • 原文地址:https://www.cnblogs.com/apolloren/p/15008454.html
走看看 - 开发者的网上家园