之前做了二維碼打印功能，中間遇到了一點(diǎn)“奇怪”的問題，這里說下，希望大家遇到了同樣的問題，不必為此苦惱。。。

首先在頁面引入兩個(gè)js文件：jquery.jqprint-0.3.js 和?jquery-migrate-1.2.1.min.js

?

打印二維碼的位置 <div id="dayin" style="margin: 0 auto;" hidden> </div> <script>

點(diǎn)擊”打印“按鈕觸發(fā)事件

/*打印*/ function storedCardPrint() {var num = $('#simplePrinter').val();if (num > 0 && num <= 300) {var employeeId = $('#printerId').val();printer(employeeId);} else {Lobibox.notify('error', {msg: '請(qǐng)輸入正確的張數(shù)[0~300（含300不含0）]',sound: false});} } /*打印函數(shù)*/ function printer(employeeId) {$('#dayin').empty();$.ajax({url: "/work/code/getCode",type: "post",dataType: "json",async: true,//注意添加async：false 同步參數(shù)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>導(dǎo)購(gòu)姓名：<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>聯(lián)系電話：<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("系統(tǒng)錯(cuò)誤");}}); }

?

END，利用此插件通過瀏覽器打印二維碼功能就此實(shí)現(xiàn)了。

此功能測(cè)試沒有任何問題，but...上線后卻打印的是空白，數(shù)據(jù)沒了。。。

于是，就馬上定位問題，經(jīng)過驗(yàn)證數(shù)據(jù)是有的，頁面調(diào)試過程數(shù)據(jù)也是有的，但是打印的是空白。。。mmp，這真是奇了怪了，通過過次驗(yàn)證。。。發(fā)現(xiàn)了一個(gè)有趣的現(xiàn)象，經(jīng)過頁面一步步調(diào)試，發(fā)現(xiàn)打印數(shù)據(jù)又有了。如果不調(diào)試，按正常操作，打印的依舊是空白，，，然后懷疑是否是js庫(kù)的問題。當(dāng)查看js文件源碼時(shí)，發(fā)現(xiàn)了這段代碼：

setTimeout 用于延遲執(zhí)行某方法或功能。之前一直以為是網(wǎng)絡(luò)慢的原因，是覺得加載不出來。。。于是就報(bào)著試一試的態(tài)度，延長(zhǎng)了執(zhí)行時(shí)間。兩秒鐘后執(zhí)行，，，然后再次運(yùn)行竟然好了。。。

總結(jié)

以上是生活随笔為你收集整理的jqprint实现浏览器打印功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。