在公司的生产现场中，常常会在一些部品或设备上贴上二维码，用于扫描录入数据，免去手动输入的麻烦。

以前曾经做过winform的程序，生成二维码，并打印出来，使用的是zxing的类库，

但是如果二维码是附在其他界面上的，使用winform就需要用到Graphics的方法，但是这个方法很难绘制出想要的效果，并且不容易修改。

后来，发现html静态网页能生成二维码，并且界面排版简单，就使用jquery.qrcode生成二维码，

打印的时候，使用jqprint，打印指定的div就可以了，非常方便。

下面分享一个本人作成的测试样例：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title>JQuery QRcode</title>

     <style>

         @media screen

         {

             #canvas

             {

                 display: block;

             }

             #image

             {

                 display: none;

             }

         }

         @media print

         {

             #canvas

             {

                 display: none;

             }

             #image

             {

                 display: block;

             }

         }

     </style>

     <script src="jquery/jquery-1.11.3.min.js" type="text/javascript"></script>

     <script src="jquery/jquery.qrcode.min.js" type="text/javascript"></script>

     <script src="jquery/jquery.jqprint-0.3.js" type="text/javascript"></script>

     <script>

     function encode(){

         $("#code").html('');

         var str=$('#txt').val();

         str=toUtf8(str);

         //$('#code').qrcode(str);

         $("#code").qrcode({

             render: "canvas", //table方式

             width: 100, //宽度

             height:100, //高度

             text: str //任意内容

         });

     }

     function toUtf8(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 print(){

         var img = document.getElementById("image"); /// get image element

         var canvas  = document.getElementsByTagName("canvas")[0];  /// get canvas element

         img.src = canvas.toDataURL();                     /// update image

         $("#image").jqprint({

             debug:false,

             importCSS:true,

             printContainer:true,

             operaSupport:false

         });

     }

     </script>

 </head>

 <body>

     <input type="text" id="txt" />

     <button id="btnEncode" onclick="encode();">

         生成QRcode</button>

     <button id="btnPrint" onclick="print();">

         打印</button>

     <hr />

     <div id="code">

     </div>

     <img id="image" src="" />

 </body>

 </html>

简单说明一下：
encode方法是在#code的标签上生成二维码的，其中调用了toUtf8的函数，这是使中文可以正常编译为二维码的方法；

print方法就是打印了，需要说明的是，canvas标签并不能直接打印，因为是动态的，打印会显示空白，

我这里是借用了一个img标签，先把canvas图像赋予给img，再打印img，由于上方有定义img标签的display属性为none，所以不会显示。

注意：71行和72行，标签选择方法尽量不使用jquery，本人试过使用$选择器，但提示对象无法调用toDataURL()，大概是jquery没有这个属性吧，所以需要用javascript的选择方法，这个问题，困扰了我很久。

jquery.qrcode二维码的生成方法是，在#code的div中，生成一个canvas的动画，

43行的渲染方法，可以改为“table”，那就是在#code的div中生成一个table，通过调整样式，使td显示出一个个黑点的二维码，但这个方式无法打印，因为不是图像，不能转移为img。

代码页面的效果如下：

使用以上的方法，还能在div的其他地方添加其他元素，就能生成自己想要的图像了。

jquery.qrcode和jqprint的联合使用，实现html生成二维码并打印（中文也ok）的更多相关文章

  1. jquery.qrcode.js 生成二维码并支持中文的方法

    GitHub地址: https://github.com/jeromeetienne/jquery-qrcode <div class="QR"></div> ...

  2. MVC3学习：利用jquery+ajax生成二维码（支持中文)

    二维码越来越热火了,做电子商务网站,不做二维码,你就OUT了. 一.下载DLL文件(ThoughtWorks.QRCode.dll),并在项目中引用.点此下载 如果你还不知道什么是QRCode二维码, ...

  3. jQuery.qrcode.js客户端生成二维码，支持中文并且可以生成LOGO

    描述: jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码.此插件是能够独立使用的,体积也比较         ...

  4. 使用jQuery的插件qrcode生成二维码（静态+动态生成）及常见问题解决方法

    一.简介 1.说明 qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式,您可以到https://github.com/jeromeetienn ...

  5. js生成二维码的jquery组件–qrcode

    js生成二维码的jquery组件–qrcode 2015/01/30 / 2508 VIEWS / JAVASCRIPT, JQUERY 有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. ...

  6. jquery生成二维码并实现图片下载

    1.引入jquery的两个js文件 <script src="../scripts/erweima/jquery-1.10.2.min.js"></script& ...

  7. VUE使用QRcode或者vue-qr生成二维码

    这里介绍两种vue生成二维码的方法 QRcode vue-qr vue-qr比QRcode功能多在可以在中间加logo 下面先介绍QRcode vue里安装qrcodejs的npm包 npm inst ...

  8. 使用jquery.qrcode生成二维码（转）

    jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单: 1.首先在页面中加入jquery库文件和qrcode插件. <script type=" ...

  9. Jquery.Qrcode在客户端动态生成二维码并添加自定义Logo

    0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服 ...

随机推荐

  1. Spring 通过工厂方法(Factory Method)来配置bean

    Spring 通过工厂方法(Factory Method)来配置bean 在Spring的世界中, 我们通常会利用bean config file 或者 annotation注解方式来配置bean. ...

  2. 3.android下Makefile编写规范

    随着移动互联网的发展,移动开发也越来越吃香了,目前最火的莫过于android,android是什么就不用说了,android自从开源以来,就受到很多人的追捧.当然,一部人追捧它是因为它是Google开 ...

  3. 【HDOJ】1867 A + B for you again

    KMP算法的应用. #include <stdio.h> #include <string.h> #define MAXNUM 100005 char src[MAXNUM], ...

  4. Android之sqlite 命令

    1.数据库.表的建立,记录的添加.查询.修改和删除 F:">sqlite3 database.dbsqlite> create table admin(username text ...

  5. HDU-2549 壮志难酬

    壮志难酬 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  6. KTV点歌系统播放原理

    北大青鸟KTV点歌系统播放原理 指导老师--原玉明 1.首先知道有两个类(PlayList   Song) PlayList类中有一方法 public static bool AddSong(Song ...

  7. 理解wait notify的好例子

    import java.util.concurrent.TimeUnit; public class Example2 { /** * @param args */ public static voi ...

  8. CSS样式学习笔记『W3School』

    1.选择器+声明声明:属性+值eg:h1{color:red;font-size:14px;}颜色:p{color:#ff0000;}p{color:#f00;}p{color:rgb(255,0,0 ...

  9. 蔡勒(Zeller)公式

    蔡勒(Zeller)公式,是一个计算星期的公式,随便给一个日期,就能用这个公式推算出是星期几. W =[ [c/4] - 2c + y + [y/4] + [13 * (m+1) / 5] + d - ...

  10. php非阻塞执行系统命令

    大家都知道php调用系统命令常用的主要有以下几种方法: 如exec(), system(), passthru(), shell_exec() 这几个函数的用法在此不做说明,有需要的请查阅php相关手 ...