zoukankan      html  css  js  c++  java
  • 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() 最好是加上,可以控制打印窗口关闭后 直接 关闭新打开的窗口。

  • 相关阅读:
    多层结构中,事务的运用。
    A private conversation
    Sql Server 日志清理 (数据库压缩方法)
    Basic of Ajax
    Persin Buttons
    不知为什么无缘无故加到了一个“邯郸.net俱乐部”,想退出,找不到入口.....
    Wokflow designer not working when openning workflow in nonworkflow VS 2005 project
    GridView中如何取得隐藏列的值?
    Error: cannot obtain value
    Too late
  • 原文地址:https://www.cnblogs.com/Esther-yan/p/12983485.html
Copyright © 2011-2022 走看看