• Bootstrap modal弹出框实现打印的功能,无须跳转页面


    html页面:

    <div class="modal fade" id="viewModal" tabindex="-3" role="dialog" >
    <div class="modal-dialog" role="document">
    <div class="modal-content" style=" 260%; margin-left: -82%;">
    <div class="modal-header">
    <div id="UseForPrint" style="display:none">
    <h2>供应商资格审查表</h2>
    <table class="table cent" style="100%">
    <caption class="printXM" style="font-size: 18px;"></caption>
    <thead>
    <tr>
    <th>序号</th>
    <th>供应商</th>
    <th>审查结果</th>
    </tr>
    </thead>
    <tbody class="addTd2">
    </tbody>
    </table>

    </div>
    <div class="text-center">
    <button type="button" class="btn btn-primary" onclick="printpage()">打印资格审查结果</button>
    </div>
    </div>
    <div class="modal-footer">
    <div class="btn btn-default" data-dismiss="modal">关闭</div>
    </div>
    </div>
    </div>
    </div>

    html 页面 的 class="modal-body 可以 设置一些样式,控制内容,

    js:

    通过事件把上面的 modal 弹出,$("#popPrintSheet").modal();

    这个页面上也可以增加一个 打印的按钮直触发输内容;

    下面的是 打印方法:

    var printpage = function (){
    var printHtml = $("#UseForPrint").html();
    var wind = window.open("", "newwin", "toolbar=no,scrollbars=yes,menubar=no");
    var ss = "<style>"
    +"#UseForPrint{860px}"
    +".coversheet-pageBoder{"
    +" padding: 10px;"
    +" margin-top: 10px;"
    +" border: 1px solid gray;"
    +" page-break-after: always;"
    +" border-radius: 5px;"
    +" box-shadow: 0 1px 2px 1px rgba(0,0,0,.08), 0 3px 6px rgba(0,0,0,.08);"
    +"}"
    +".noprint{display: none;}"
    +".cent tr{height: 40px;"
    +"line-height: 40px;"
    +"text-align: center;"
    +"100%}"
    +"</style>";

    printHtml = ss + printHtml;
    wind.document.body.innerHTML = printHtml;
    wind.print();
    wind.close();
    }

    mydiv 输出内容的div

    ss可以增加一些样式 控制弹出页面;

     wind.close() 最好是加上,可以控制打印窗口关闭后 直接 关闭新打开的窗口。

  • 相关阅读:
    c/c++ 数组的智能指针 使用
    c/c++ 智能指针 weak_ptr 使用
    在ubuntu18.04上安装EOS
    c/c++ 智能指针 unique_ptr 使用
    python基础-内置装饰器classmethod和staticmethod
    java中5种异步转同步方法
    java自定义注解
    多线程之线程池(Thread,Runnable,callable,Future,FutureTask)
    java反射
    重写ThreadFactory方法和拒绝策略
  • 原文地址:https://www.cnblogs.com/Esther-yan/p/12983485.html
Copyright © 2020-2023  润新知