先简单说一下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. 【转】瓜娃(guava)的API快速熟悉使用

    http://www.cnblogs.com/snidget/archive/2013/02/05/2893344.html 1,大纲 让我们来熟悉瓜娃,并体验下它的一些API,分成如下几个部分: I ...

  2. 题解 P5051 【[COCI2017-2018#7] Timovi】

    看到这道题目,数据范围,心凉了一大截 这是没开O2的 而这是开了O2的 emm……本蒟蒻也无言以对呀 好了,回归正题,看到题目的标签,高性能,自然而然地想到了快读 相信做这题的大佬们一定知道吧! 快读 ...

  3. linux虚拟机配置网络

    第一步.网络模式设置为桥接模式   第二步.设置ip和掩码 vim /etc/sysconfig/network-scripts/ifcfg-ens33 ens33为当前机器的网卡名称  在文件尾部添 ...

  4. cocos2x (c++/lua) spine 文件的预加载

    在之前,笔者写过一编博客,通过lua在加载场景加载spineAnimation动画精灵,保存在table中,然后在游戏中创建动画精灵时,提取加载好的spineAnimaiton中的 spSkeleto ...

  5. 01windows常用命令及批处理

    1. 概述 复制内容:右键弹出快捷菜单,选择"标记(K)",然后选中所需要的内容,然后右键即可 粘贴内容:右键弹出快捷菜单,选择"粘贴(P)" 命令参数的路径: ...

  6. UVa - 1593 Unix ls(STL)

    给你一堆文件名,排序后按列优先的方式左对齐输出. 假设最长文件名长度是M,那么每一列都要有M+2字符,最后一列有M字符. inmanip真NB..orz #include <iostream&g ...

  7. cf 1017C

    C. The Phone Number time limit per test 1 second memory limit per test 256 megabytes input standard ...

  8. PHP GD库---之头像合成九宫格

    public function createMosaicGroupAvatar($pic_list = array(), $bg_w = 396, $bg_h = 396) { if (!$pic_l ...

  9. POJ 3057 网络流 Evacuation

    题意: 有一个n×m的房间,四周每个格子要么是墙要么是门.中间部分是墙或者人. 现在所有人要从房间逃出去,每个人的速度为1,也就是每个单位时间只能向上下左右四个方向走一格. 多个人可以站在同一个格子上 ...

  10. MyInt的简单实现

    #include <iostream> using namespace std; class CMyInt{ private: int value; public: CMyInt(int ...