1. 程式人生 > >Web 系統列印外掛——jqprint

Web 系統列印外掛——jqprint

目前所做的web系統開發當中,有著明確的需求需要列印,需要與裝置相結合。

團隊使用的是jquery中的jqprint外掛

 $("#print").click(function(){
 				
 				$("#loadAllPurchaseCommodityDetails").jqprint({debug : true});
 			});


程式碼就這麼一點點,貼上

loadAllPurchaseCommodityDetails
的一些程式碼
 <!-- 以下是like 的模態框 -->         
                            <div class="modal fade" id="cusModal-like" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                              <div class="modal-dialog" role="dialog">
                                <form class="form-horizontal" id="#form-cusLike">
                                <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>
                                  </div>
                                  <div class="modal-body">
                                     <table class="table table-hover" id="loadAllPurchaseCommodityDetails">
                                            <thead>
                                              <tr>
                                                <th  data-field="sodDetailId" data-visible="false" data-sortable="true">
                                                   申購單明細ID
                                                </th>
                                                <th  data-field="name">
                                                   商品名稱
                                                </th>
                                                <th  data-field="number">
                                                   商品數量
                                                </th>
                                                <th  data-field="code">
                                                   商品條形碼
                                                </th>
                                                <th  data-field="soSupplier">
                                                   供應商姓名
                                                </th>
                                                <th  data-field="remark">
                                                   商品備註
                                                </th>
                                               </tr>
                                            </thead>
                                        </table>
                                  </div>
                                  <div class="modal-footer">
                                    <button type="button" class="btn btn-white" data-dismiss="modal">關閉</button>
                                    <button type="button" class="btn btn-primary"   id="print">列印</button>
                                  </div>
                                </div>
                                </form>
                              </div>
                            </div>
                            
大概就這樣,實際的效果


還是挺ok的,在使用期間可能會遇到一些問題比如說點選列印按鈕沒反應,這時候開啟開發者工具會看到一些jqprint is not a function 或是cannot read property ‘opera’ of 

undefined 之類的問題,匯入這倆js檔案

<script src="js/plugins/jquery.jqprint-0.3.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>

以上

有一些小問題,比如點選列印的時候,介面會出現一小塊區域浮現列印的資料,而且取消不了,還有一個是需要跳轉到新介面點選列印才行。

這塊已經交給隊伍裡的前端工程師,希望能儘早修改原始碼達成想要的效果。

這個外掛是開源