1. 程式人生 > >bootstrapTable printThis打印插件

bootstrapTable printThis打印插件

tab day prim value adc print input spa func

效果圖:

技術分享

如圖,這個是調用了谷歌的打印,使用很方便,可以自己調樣式,需要的可以研究一下,這邊貼出使用方法。

附上GitHub:https://github.com/jasonday/printThis

jsp:

<script src="<%=basePath %>bootstrap/js/printThis.js"></script>  
<!-- 二維碼彈出框 -->  
<div class="modal fade" id="myModal_qrcode" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">  
    <div class="modal-dialog" role="document">  
        <div class="modal-content">  
            <div class="modal-header">  
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">  
                    <span aria-hidden="true">×</span>  
                </button>  
                <h4 class="modal-title" id="myModalLabel">二維碼</h4>  
            </div>  
            <div class="modal-body">  
                <center>  
                    <div id="qrcode"></div>  
                    <table>  
                        <tbody>  
                            <tr>  
                                <td>  
                                 <label class="col-sm-4 control-label" for="equ_name_qrcode"><h7>設備名稱:</h7></label>  
                                 <div class="col-sm-8">  
                                     <input class="form-control" id="equ_name_qrcode" type="text"/>  
                                 </div>  
                                </td>  
                                <td>  
                                    <label class="col-sm-4 control-label" for="equ_ip_qrcode"><h7>設備IP:</h7></label>  
                                    <div class="col-sm-8">  
                                    <input class="form-control" id="equ_ip_qrcode" type="text"/>  
                                    </div>  
                                </td>  
                            </tr>  
                        </tbody>  
                    </table>  
                </center>  
            </div>  
            <div class="modal-footer">  
                <button type="button" class="btn btn-default" data-dismiss="modal">  
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>關閉  
                </button>  
                <button type="button" id="btn_print" class="btn btn-primary" data-dismiss="modal">  
                    <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>打印  
                </button>  
            </div>  
        </div>  
    </div>  
</div>  

  JS:

 1  $("#btn_print").click(function(event) {  
 2         /* Act on the event */  
 3            $("#qrcode").printThis({  
 4                debug: false,  
 5                importCSS: false,  
 6                importStyle: false,  
 7                printContainer: true,  
 8 //               loadCSS: "/Content/Themes/Default/style.css",  
9 pageTitle: "二維碼", 10 removeInline: false, 11 printDelay: 333, 12 header: null, 13 formValues: false 14 }); 15 // alert("等待打印"); 16 });

bootstrapTable printThis打印插件