jquery.qrcode和jqprint的联合使用，实现html生成二维码并打印（中文也ok）
在公司的生产现场中，常常会在一些部品或设备上贴上二维码，用于扫描录入数据，免去手动输入的麻烦。
以前曾经做过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）的更多相关文章
- jquery.qrcode.js 生成二维码并支持中文的方法
GitHub地址: https://github.com/jeromeetienne/jquery-qrcode <div class="QR"></div> ...
- MVC3学习：利用jquery+ajax生成二维码（支持中文)
二维码越来越热火了,做电子商务网站,不做二维码,你就OUT了. 一.下载DLL文件(ThoughtWorks.QRCode.dll),并在项目中引用.点此下载 如果你还不知道什么是QRCode二维码, ...
- jQuery.qrcode.js客户端生成二维码，支持中文并且可以生成LOGO
描述: jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码.此插件是能够独立使用的,体积也比较 ...
- 使用jQuery的插件qrcode生成二维码（静态+动态生成）及常见问题解决方法
一.简介 1.说明 qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式,您可以到https://github.com/jeromeetienn ...
- js生成二维码的jquery组件–qrcode
js生成二维码的jquery组件–qrcode 2015/01/30 / 2508 VIEWS / JAVASCRIPT, JQUERY 有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. ...
- jquery生成二维码并实现图片下载
1.引入jquery的两个js文件 <script src="../scripts/erweima/jquery-1.10.2.min.js"></script& ...
- VUE使用QRcode或者vue-qr生成二维码
这里介绍两种vue生成二维码的方法 QRcode vue-qr vue-qr比QRcode功能多在可以在中间加logo 下面先介绍QRcode vue里安装qrcodejs的npm包 npm inst ...
- 使用jquery.qrcode生成二维码（转）
jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单: 1.首先在页面中加入jquery库文件和qrcode插件. <script type=" ...
- Jquery.Qrcode在客户端动态生成二维码并添加自定义Logo
0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服 ...
随机推荐
- 在html中嵌入markdown
在博客园网页里写markdown的时候, 某些特殊内容想加上自定义的css, 于是用<div class="xxx">包裹起来, 但是发现该<div>中的m ...
- 数据库sql整体整理
create database 数据库 /* 数据库的服务.数据库文件. */ --修改表添加列 create table biao ( name ) ) ) --往表里增加一列 alter tabl ...
- Linux内存调试工具初探-MEMWATCH
C 语言作为 Linux 系统上标准的编程语言给予了我们对动态内存分配很大的控制权.这种自由可能会导致严重的内存管理问题,可能导致程序崩溃或随时间的推移导致性能降级. 内存泄漏(即 malloc() ...
- yml文件数据的简洁表达方法（Hashes to OpenStruct）
通过ruby编写测试脚本的时候,我还是喜欢采用yml来管理测试数据,就像以前的文章(Selenium WebDriver + Grid2 + RSpec之旅(五))提到的一样,但是在引用yml中的数据 ...
- sql 将Null 值转化成空字符串
当Null + 任何字符串时,都等于Null. 因些用函数IsNull(字段名,''),如果字段名中的值是Null时,那么这个字段名的值是''. 例如::select code + IsNull('- ...
- 进程与线程（四） linux进程间通信的方式总结
1概述: 上文说到,每个进程都有自己的地址空间,包括什么呢?向下生长得栈,向上生长的堆,代码段,数据段等,这些都是进程私有的,如何实现通信的呢?通信需要媒介,这个媒介很重要. 对于研发人员来说,进程不 ...
- bzoj 1604 [Usaco2008 Open]Cow Neighborhoods 奶牛的邻居（set+并查集）
Description 了解奶牛们的人都知道,奶牛喜欢成群结队．观察约翰的N(1≤N≤100000)只奶牛,你会发现她们已经结成了几个“群”．每只奶牛在吃草的 时候有一个独一无二的位置坐标Xi,Yi( ...
- bzoj 1069 [SCOI2007]最大土地面积（旋转卡壳）
1069: [SCOI2007]最大土地面积 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 2277 Solved: 853[Submit][Stat ...
- （转载）反编译android的apk文件步骤
下面的方法我已经尝试过,完全可以成功,重点的步骤我在这里说一下 1.必须要有java环境,记得配置好环境变量 2.如果只查看class中的函数文件,只需要下载dex2jar和jd-gui 3.下载地址 ...
- 借助bool判断使冒泡排序效率提高
排序问题是编程中最常见的问题.实际应用中,计算机有接近一半时间是在处理有关数据排列的问题,提高排序的效率有助于更快地解决问题. 先来说说平常一般的冒泡算法,使用两个循环,外循环作为整体排序,每趟循环使 ...