利用jquery.qrcode生成的二维码无法打印的解决办法

作者:Carl Zhang | 更新时间:2019-03-02 | 分类:科技

项目中需要用到一个生成二维码并打印的功能,具体需求是在点下按钮,生成二维码,同时调用浏览器的打印功能,进行打印。用的是JQuery.qrcode和JQuery.printArea,但是遇到了一个问题,就是这个二维码在打印预览中怎么都不显示。

来看看具体怎么实现:(所有我认为需要解释的都在代码中注释了,大家可以直接查看代码,有问题可以在文末留言~)

<!-- 代码片作者:Carl Zhang,转载请注明。 -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-2.2.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.qrcode.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.PrintArea.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            function f_print() {
                // 从文本框中获取文字
                var item = document.getElementById("print_value").value;
                
                f_generateQRCode(item);
            }
            
            function f_generateQRCode(item) {
                // 每次执行前先清空原有的二维码
                jQuery('#QRCode').html('');
                jQuery('#showQRCode').html('');
                
                // 转码中文,确保生成的二维码扫描以后中文不会变成乱码
                var print = utf16to8(item); 
                // 创建一个img元素用于存放图片形式的二维码
                var img = document.createElement("img");
                // 创建一个div元素用于存放生成二维码的文字
                var textDiv = document.createElement("div");
                // 创建一个div元素用于存放上面那个img元素,以方便控制样式
                var imgDiv = document.createElement("div");

                // 设置img和文字div的样式
                img.style = 'text-align: center; width: 50%;';
                textDiv.style = 'text-align: center; width: 100%;font-size:30px';

                // 利用jquery.qrcode在id为“showQRCode”的div中生成一个canvas格式的二维码
                jQuery('#showQRCode').qrcode({width:200,height:200,correctLevel:0,text:print});
                // 对生成的canvas添加id
                $("canvas").attr("id","qrcode_canvas");
                // 根据刚才添加的id获取canvas元素
                var canvas = document.getElementById("qrcode_canvas");
                // 利用toDataURL函数将canvas中的二维码转换成base64形式
                var strDataURI = canvas.toDataURL("image/png");
                // 更改img的src属性为上方的这个base64
                img.src = strDataURI;
                // 将文字添加到文字div中
                textDiv.innerText=item;
                // 将img元素放入到imgDiv中
                jQuery(imgDiv).append(img);
                // 将imgDiv元素放入id为“QRCode”的div中,下同,不再叙述
                jQuery('#QRCode').append(imgDiv);
                jQuery('#QRCode').append('<br/>');
                jQuery('#QRCode').append(textDiv);
                jQuery('#QRCode').append('<br/>');

                // 打印二维码所在区域
                $("#QRCode").printArea();
            }
            
            // 转换中文, 避免二维码扫描出来中文是乱码的情况(此函数来自网络)
            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;
            }
        </script>
        
        <!-- 若不想让这些二维码在页面中显示,可以利用以下css -->
        <!-- 但是必须设置@media print的样式将需要打印的部分显示出来-->
        <!-- 否则打印的时候会不显示 -->
        <!-- 
        <style>
            #QRCode {
                display:none;
            }
            #showQRCode {
                display:none;
            }
            @media print {
                #QRCode {
                    display: block;
                }
            }
        </style>
        -->
    </head>
    
    <body>
        <div>
            <input type="text" name="print_value" id="print_value" value="" />
            <button type="button" onclick="f_print()">打印</button>
        </div>
        <br>
        
        <div>通过JQuery.qrcode直接生成的二维码:</div>
        <div style="text-align: center" id="showQRCode"></div>        
        <br>

        <div>转换成图片以后的二维码:</div>
        <div style="text-align: center" id="QRCode"></div>
    </body>
</html>

具体效果:

页面上不显示二维码的效果:

(本文为作者原创。转载请注明:转自carlzhang.net






返回顶端