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

以前曾经做过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. google python/c++ code style naming

    python: Guidelines derived from Guido's Recommendations Type Public Internal Packages lower_with_und ...

  2. logstahs 匹配isslog

    2016-11-30 06:33:33 192.168.5.116 GET /Hotel/HotelDisplay/cncqcqb230 - 80 - 192.168.9.2 Mozilla/5.0+ ...

  3. 基于WCF大型分布式系统的架构设计

    在大型系统中应用中,一个架构设计较好的应用系统,其总体功能肯定是由很多个功能模块所组成的,而每一个功能模块所需要的数据对应到数据库中就是一个或多个表.而在架构设计中,各个功能模块相互之间的交互点 越统 ...

  4. .NET Linq/MVC/架构

    学习参考: http://www.cnblogs.com/wangiqngpei557/p/3576685.html

  5. Bzoj 3747: [POI2015]Kinoman 线段树

    3747: [POI2015]Kinoman Time Limit: 60 Sec  Memory Limit: 128 MBSubmit: 553  Solved: 222[Submit][Stat ...

  6. (转)PQ分区魔术师中文版分区教程

    PQ分区魔术师中文版分区的图解,图文并茂很多朋友提到硬盘分区,觉得不敢轻易去尝试,怕得不偿失,深度xp系统下载在此分享下pq分区的图解详见下图: 1)这是用的雨林木风系统的光盘,其他系统盘一样 2)首 ...

  7. Shell如何传递字符串

    Shell 在写函数的时候,有时候需要传递字符串,由于字符串中有空格,所以结果总是不对,下面写个小例子,解决这个问题: #!/bin/bash # value init TT="adb sh ...

  8. xcode7下开发ios9等相关问题记录

    1.默认使用HTTPS请求如果在Xcode 9之前使用的时http请求,那么在XCode 9上编译的App是不能联网的,会提示如下错误:App Transport Security has block ...

  9. Morris Traversal 二叉树遍历。

    那天做了个SWAP NODE的题,要求constant space,不得不Morris Traversal. 稍微研究了一下,真正意义上的O(1)space对二叉树进行遍历.好像是1979年的算法. ...

  10. Code Forces 711D Directed Roads

    D. Directed Roads time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...