jqprint实现浏览器打印功能

之前做了二维码打印功能，中间遇到了一点“奇怪”的问题，这里说下，希望大家遇到了同样的问题，不必为此苦恼。。。

首先在页面引入两个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 用于延迟执行某方法或功能。之前一直以为是网络慢的原因，是觉得加载不出来。。。于是就报着试一试的态度，延长了执行时间。两秒钟后执行，，，然后再次运行竟然好了。。。