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

首先在頁面引入兩個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 用于延遲執行某方法或功能。之前一直以為是網絡慢的原因，是覺得加載不出來。。。于是就報著試一試的態度，延長了執行時間。兩秒鐘后執行，，，然后再次運行竟然好了。。。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。