Web 系統列印外掛——jqprint
阿新 • • 發佈:2019-01-06
目前所做的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>
以上
有一些小問題,比如點選列印的時候,介面會出現一小塊區域浮現列印的資料,而且取消不了,還有一個是需要跳轉到新介面點選列印才行。
這塊已經交給隊伍裡的前端工程師,希望能儘早修改原始碼達成想要的效果。
這個外掛是開源