之前做了二维码打印功能,中间遇到了一点“奇怪”的问题,这里说下,希望大家遇到了同样的问题,不必为此苦恼。。。
首先在页面引入两个js文件:jquery.jqprint-0.3.js 和 jquery-migrate-1.2.1.min.js
打印二维码的位置 <div id="dayin" style="margin: 0 auto;" hidden> </div> <script>
点击”打印“按钮触发事件
/*打印*/ function storedCardPrint() { var num = $('#simplePrinter').val(); if (num > 0 && num <= 300) { var employeeId = $('#printerId').val(); printer(employeeId); } else { Lobibox.notify('error', { msg: '请输入正确的张数[0~300(含300不含0)]', sound: false }); } }
/*打印函数*/ function printer(employeeId) { $('#dayin').empty(); $.ajax({ url: "/work/code/getCode", type: "post", dataType: "json", async: true,//注意添加async:false 同步参数 data: { "employeeId": employeeId, "cardId": storedCardId, "groupId": groupId }, success: function (data) { if (data.msg != null && data.msg != '' && data.msg != '成功') { Lobibox.notify('error', { msg: data.data.msg, sound: false }); table.draw(); } else { var num = $('#simplePrinter').val(); var imageUrl = data.data.code; var cardName = data.data.cardName; var employeeName = data.data.employeeName; var mobile = data.data.mobile; var text = '<table style="width: 260px;height: 180px;"><tr class="ka" style="background-color: white;display: flex;align-items:center;font-size: 12px;margin: 0 auto;position:relative;left:16px;"><td style="margin-left: 1px;width:170px"><img style="height: 150px;margin-top: 10px" src="' + imageUrl + '" alt=""></td><td style="margin-left: -8px;margin-top:15px;font-size:14px;width:210px;"><span style="width:110px;word-break:normal; display:block; white-space:pre-wrap;word-wrap : break-word ;overflow: hidden ;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;">' + cardName + '</span><br>导购姓名:<span style="width:110px;word-break:normal; display:block; white-space:pre-wrap;word-wrap : break-word ;overflow: hidden ;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;">' + employeeName + '</span><br>联系电话:<br>' + mobile + '</br></td></tr></table><div style="page-break-after:always"></div>'; for (var i = 0; i < num; i++) { $('#dayin').append(text); } $('#dayin').show(); $("#dayin").jqprint({importCSS: true, operaSupport: true}); $("#dayin").hide(); } }, error: function () { alert("系统错误"); } }); }
END,利用此插件通过浏览器打印二维码功能就此实现了。
此功能测试没有任何问题,but...上线后却打印的是空白,数据没了。。。
于是,就马上定位问题,经过验证数据是有的,页面调试过程数据也是有的,但是打印的是空白。。。mmp,这真是奇了怪了,通过过次验证。。。发现了一个有趣的现象,经过页面一步步调试,发现打印数据又有了。如果不调试,按正常操作,打印的依旧是空白,,,然后怀疑是否是js库的问题。当查看js文件源码时,发现了这段代码:
setTimeout 用于延迟执行某方法或功能。之前一直以为是网络慢的原因,是觉得加载不出来。。。于是就报着试一试的态度,延长了执行时间。两秒钟后执行,,,然后再次运行竟然好了。。。