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>


以上


有一些小问题,比如点击打印的时候,界面会出现一小块区域浮现打印的数据,而且取消不了,还有一个是需要跳转到新界面点击打印才行。

这块已经交给队伍里的前端工程师,希望能尽早修改源码达成想要的效果。

这个插件是开源

控件功能强大,却简单易用,所有调用如同JavaScript扩展语句, 主要接口函数如下: PRINT_INIT 打印初始化 SET_PRINT_PAGESIZE 设定纸张大小 ADD_PRINT_HTM 增加超文本项 ADD_PRINT_TEXT 增加纯文本项 ADD_PRINT_TABLE 增加表格项 ADD_PRINT_SHAPE 画图形 SET_PRINT_STYLE 设置对象风格 PREVIEW 打印预览 PRINT 直接打印 PRINT_SETUP 打印维护 PRINT_DESIGN 打印设计 ... 样例清单 1.如何在页面内嵌入控件见样例一 2.如何选材打印当前页面内容见样例二 3.如何用代码生成打印页见样例三 4.如何打印设计和定位套打见样例四 5.如何控制纸张大小和连续打印见样例五 6.如何输出多页长文档及双面打印见样例六 7.如何定向输出见样例七 8.如何打印图片见样例八 9.如何用程序加载打印维护背景图见样例九 10.如何控制打印样式(STYLE)见样例十 11.如何直接打印条形码见样例十一 12.如何读写本地文件见样例十二 13.如何打印旋转内容见样例十三 14.如何按URL打印见样例十四 15.如何打印表格的页头页尾见样例十五 16.如何设置预览窗口大小见样例十六 17.如何发打印机指令或直接读写端口见样例十七 18.如何打印幅面高度不固定的票据见样例十八 19.如何内嵌显示及预览时包含背景图见样例十九 20.如何强制分页并预览多页卡片见样例二十 21.如何控制打印维护的功能权限见样例二十一 22.如何构建自己的纯WEB打印预览见样例二十二 23.如何居中打印超文本见样例二十三 24.如何选择界面皮肤见样例二十四 25.如何指定输出到哪页或仅预览见样例二十五 26.如何提高多页打印的性能见样例二十六 27.如何导出数据到Excel文件见样例二十七 28.如何快速读取客户端系统信息见样例二十八 29.如何使用其它长度单位见样例二十九 30.如何分页输出页面内容见样例三十 31.如何打印表格的分页小计或合计见样例三十一 32.如何实现清晰的图表打印见样例三十二 33.如何实现甘特图等的图表打印见样例三十三 34.如何使用百分比%和满页打印见样例三十四 35.如何获得打印结果和程序代码见样例三十五 36.如何在设计过程中用js编辑内容见样例三十六 37.如何打印公章效果图见样例三十七 38.如何用BASE64编码输出图片见样例三十八 39.如何打印田字格、上划线等文本见样例三十九 40.如何进行数据格式转换见样例四十 41.如何把内容关联后按顺序打印见样例四十一 42.如何把整页内容缩放打印见样例四十二 43.如何分页打印综合表格见样例四十三 44.如何缩放打印单个超文本内容见样例四十四 45.如何获得打印状态及最终结果见样例四十五 46.如何设置右边距和下边距见样例四十六
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值