先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcode 获取),

qrcode.js 是实现二维码数据计算的核心类,

jquery.qrcode.js 是把它用jquery方式封装起来的,用它来实现图形渲染,其实就是画图(支持canvas和table两种方式)

支持的功能主要有:

  1. text     : "https://github.com/jeromeetienne/jquery-qrcode"  //设置二维码内容
  1. render   : "canvas",//设置渲染方式
  2. width       : 256,     //设置宽度
  3. height      : 256,     //设置高度
  4. typeNumber  : -1,      //计算模式
  5. correctLevel    : QRErrorCorrectLevel.H,//纠错等级
  6. background      : "#ffffff",//背景颜色
  7. foreground      : "#000000" //前景颜色

使用方式非常简单

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

经过简单实践,

使用canvas方式渲染性能还是非常不错的,但是如果用table方式,性能不太理想,特别是IE9以下的浏览器,所以需要自行优化一下渲染table的方式,这里就不细述了。

二、JS生成中文二维码

其实上面的js有一个小小的缺点,就是默认不支持中文。

这跟js的机制有关系,jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的,

而这个方法默认会获取它的 Unicode 编码,一般的解码器都是采用UTF-8, ISO-8859-1等方式,

英文是没有问题,如果是中文,一般情况下Unicode是UTF-16实现,长度2位,而UTF-8编码是3位,这样二维码的编解码就不匹配了。

解决方式当然是,在二维码编码前把字符串转换成UTF-8,具体代码如下:

  1. function utf16to8(str) {
  2. var out, i, len, c;
  3. out = "";
  4. len = str.length;
  5. for(i = 0; i < len; i++) {
  6. c = str.charCodeAt(i);
  7. if ((c >= 0x0001) && (c <= 0x007F)) {
  8. out += str.charAt(i);
  9. } else if (c > 0x07FF) {
  10. out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
  11. out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
  12. out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
  13. } else {
  14. out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
  15. out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
  16. }
  17. }
  18. return out;
  19. }

打印插件jqprint

js 打印二维码的更多相关文章

  1. vue常用插件之打印功能、二维码插件、批量打印二维码

    vue实现打印的两种方法 vue实现批量打印二维码 (需安装二维码插件qrcodejs2) 一.vue-print-nb插件 1.安装: npm i vue-print-nb -S 2.全局注册(ma ...

  2. 使用FastReport打印二维码

    简单介绍一下该功能所在的项目背景:C#语言编写的WPF客户端应用程序,在“结账”模块中,打印出的收款小票上需要显示一个二维码,服务生拿着小票去找顾客,顾客可以选择现金.银行卡等普通支付方式,也可以直接 ...

  3. 安卓四核PDA手持PDA智能POS机 打印二维码 分享

    很多项目都会用到 类似的要求  移动手持终端 通过程序 可以生成条码或二维码 打印出小票或标签纸 下面直接上代码 希望对大家有点用处 private void print(){ csys.setTex ...

  4. C#调用TSC条码打印机打印二维码

    #region 调用TSC打印机打印 /// <summary> /// 调用TSC打印机打印 /// </summary> /// <param name=" ...

  5. C# TSC打印二维码和条形码

    效果图 开发.使用环境说明 安装TSC_7.3.8_M-3.exe打印机驱动,安装时选择对应的ttp 244 pro 将TSCLIB.dll复制到C:\Windows\system 驱动安装说明 选择 ...

  6. 使用jquery.qrcode.js生成二维码

    通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...

  7. 网站开发进阶(十四)JS实现二维码生成

    JS实现二维码生成 绪 项目开发原语:已然花费半天的时间,仍旧未能将二维码显示在订单中.但是可以在单个页面中显示二维码,结合到angularjs的控制器中就失效了,自己是真的找不到其中的原因了.费解! ...

  8. 调用 js 生成图片二维码

    一.js 生成二维码: 首先,需要引用 jQuery 和 jquery.qrcode.js.然后: //生产二维码 $("#qrcodeCanvas").qrcode({ rend ...

  9. js生成二维码 qrcode

    js生成二维码 QRcode npm 地址 1.安装qrcode //在项目文件夹中执行: npm install --save qrcode //或者,将其全局安装以使用qrcode命令行来保存qr ...

随机推荐

  1. JSONPath - XPath for JSON

    http://goessner.net/articles/JsonPath/ [edit] [comment] [remove] |2007-02-21| e1 # JSONPath - XPath ...

  2. 数据库-SQL语法:把一个字段的值设为随机整数

     update test2 set zuig = (cast ( ceiling (rand()*9) as int))  

  3. SC || 那些CheckStyle中的错误们

    lab5里给了我们一个checkstyle查代码风格的方法.. 然后 lab4代码 copy一份! 添加checkstyle! 项目 右键 checkstyle!(自信脸) 3s后——7256 war ...

  4. session添加登录次数限制

    session 中设置了生存期,20分钟,输入密码错误次数保存到session 中,过一段时间自动解除: //登陆的用户名或者密码出错次数 int n = 0; if(logintimes == nu ...

  5. 01_1_jdom调用xml文件

    01_1_jdom调用xml文件 1. 导入jdom.jar包 2. xml文件内容 test.xml <?xml version="1.0" encoding=" ...

  6. HTTP无状态协议和session原理(access_token原理)

    无状态协议是指协议对务处理没有记忆能力.缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大.另一方面,在服务器不需要先前信息时它的应答就较快. Http协议不 ...

  7. console.log与console.dir的区别

    今天学习promise的时候看到了console.dir这个方法,感到很好奇,查了以下感觉又长知识了 在Chrome中,控制台对象定义了两个似乎做同样事情的方法: console.log() cons ...

  8. MySQL在windows上的安装步骤

    参考文章MySQL安装及建议:https://zhuanlan.zhihu.com/p/44977117 但在进入mysql中修改root命令时,使用文章中的命令: ALTER USER 'root' ...

  9. LeetCode之螺旋矩阵

    问题 螺旋矩阵 给定一个包含 m x n 个元素的矩阵(m 行, n 列),请按照顺时针螺旋顺序,返回矩阵中的所有元素. 示例 1: 输入: [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ ...

  10. 【windows】【md5】查看文件的md5值

    certutil -hashfile filename MD5 certutil -hashfile filename SHA1 certutil -hashfile filename SHA256 ...