先简单说一下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. python整体图

  2. javaweb基础(3)_tomcat下部署项目

    一.打包JavaWeb应用 在Java中,使用"jar"命令来对将JavaWeb应用打包成一个War包,jar命令的用法如下:

  3. 01_4_Struts路径问题

    01_4_Struts路径问题 1. Struts路径问题说明 struts2中的路径问题是根据action的路径而不是jsp路径来确定,所有尽量不要使用相对路径. 虽然可以使用redirect方式解 ...

  4. Windows10 关闭自动更新

    win+R调出运行窗口: 输入services.msc,查找 跳出服务窗口,点击windows update设置禁用即可 Windows Update Medic Service没办法禁用,需要采用其 ...

  5. vim小操作

    初时,先有ed,ed为ex之父,ex为vi之父,而vi为vim之父 c 修改 d 删除 y 复制到寄存器 g~ 反转大小写 gu 反转为小写 gU 反转为大写 > 增加缩进 < 减小缩进 ...

  6. python数据类型之元组(tuple)

    元组是python的基础类型之一,是有序的. 元组是不可变的,一旦创建便不能再修改,所以叫只读列表. name = ('alex', 'jack') name[0] = 'mark' # TypeEr ...

  7. C3P0连接问题

    C3P0 连接时的相关问题: 我的环境是在IDEA中使用C3P0中进行的: 使用C3P0主要用到的jar包都是最新和Mysql8.0兼容的包 在连接的时候遇到: 先是在连接的时候出现数据库连接的时候的 ...

  8. 建立,查询二叉树 hdu 5444

    Elven Postman Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  9. Cacti安装脚本Server端+客户端

    #!/bin/bash #auto make install LAMP+Cacti #by authors zhang #RRDtool define path variable R_FILES=rr ...

  10. selenium2元素定位Xpath和cssSelector

    Selenium2中元素有以下几种定位方法, 常用的有Id,xpath, cssSelector XPATH介绍: XPATH是一种选择器 XPATH在firefox中用firepath验证 XP ...