jquery.qrcode 批量打印

公司让做一个二维码批量打印功能,上网上找资料找了半天,都没有介绍关于怎么利用jquery.qrcode进行批量打印的,没办法只能自己想办法了。网上的都是利用

jQuery('#output').qrcode({width:200,height:200,correctLevel:0,text:content}); 

这种通过id来进行生成二维码的,这种情况只能生成一个,那么通过什么办法生成多个呢?

既然能通过获取id的方式生成二维码,那么我在js中通过for循环生成div,然后给这个id赋值,然后再调用上面的那个语句是否可以生成呢,当然id是一个变量。没想到竟然成功了,记录下来代码:

<div  >
    <div class="float-right">
        <button type="button" id="btnSave" onclick="PrintArticle()"  runat="server"  >打印</button>
       
    </div>
</div>
<div id="qrcode">
</div>
 <!-- 二维码控件 -->

 <script type="text/javascript" src="scripts/jquery/jquery.min.js"></script>
 <script type="text/javascript" src="scripts/jquery.qrcode.min.js"></script>
<script src="scripts/jquery.jqprint-0.3.js"></script>
<script>
    for (var i = 0; i < 10; i++) {
        $("#qrcode").append("<div>woshi dddee<br/><img id='x" + i + "' width='120px;' src='' /><div id='" + i + "'></div> </div>");///必须加一个image,不加在打印的时候没值。不相信可以将PrintArticle隐藏的部分放开,然后将打印的隐藏掉。
        $('#' + i).qrcode(utf16to8(i.toString() +"中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人中国人"));
        var img = document.getElementById("x" + i.toString()); /// get image element
        var canvas = document.getElementsByTagName("canvas")[i];  /// get canvas element
        canvas.style="display:none";///将生成的隐藏起来。
        img.src = canvas.toDataURL();                     /// update image
    }

    function utf16to8(str) {
        var out, i, len, c;
        out = "";
        len = str.length;
        for (i = 0; i < len; i++) {
            c = str.charCodeAt(i);
            if ((c >= 0x0001) && (c <= 0x007F)) {
                out += str.charAt(i);
            } else if (c > 0x07FF) {
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            } else {
                out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            }
        }
        return out;
    }  

 
    function PrintArticle() {

        $("#qrcode").jqprint({
                        debug:false,
                        importCSS:true,
                         printContainer:true,
                        operaSupport:false
          });
        //var pc = document.getElementById("qrcode");
        //var pw = window.open('', '', 'width=500,height=400');
        //pw.document.write('<html>');
        //pw.document.write('<head>');
        //pw.document.write('<title>ASP.NET网页打印测试</title>');
        //pw.document.write('</head>');
        //pw.document.write('<body>');
        //pw.document.write(pc.innerHTML);
        //pw.document.write('</body>');
        //pw.document.write('</html>');
        //pw.document.close();
        //setTimeout(function () {
        //    pw.print();
        //}, 500);
        return false;
    }
   
</script>

猜你喜欢

转载自www.cnblogs.com/caidie/p/10132475.html
今日推荐