二维码学习（四）：使用jquery生成二维码

这篇使用jquery生成二维码。很简单，而且很实用，当二维码数据量不太大的时候推荐使用。

1、导入Jquery包：

jquery.min.js：jquery包
jquery.qrcode.min.js

2、页面结构：

<body>
生成的二维码如下：
<div id="qrcode"></div>
</body>

这里的ID可以随便取名，只需要跟JS中的对象一一对应即可。

3、使用JS生成二维码：

$(document).ready(function() {
	var value = "使用Jquery生成二维码";
	value = utf16to8(value);//转码，直接生成的二维码扫描出来的结果是乱码，转码之后可以成功扫描出中文
	$("#qrcode").qrcode({
		render : "table",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好，但是它要求浏览器支持Html5，因为它使用canvas标签展示二维码的
		text : value,    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
		width : "200",               //二维码的宽度
		height : "200",              //二维码的高度
		background : "#ffffff",       //二维码的后景色
		foreground : "#000000"        //二维码的前景色
	});
});

//编码要显示的内容
function utf16to8(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;  
}

4、可能出现的问题：无法打印 所谓的无法打印，并不是打印不了，而是无论打印还是预览，二维码显示不出来。也就是原本网页中显示二维码的地方在打印预览里是一片空白。解决办法： a、在打印预览的页面设置中，勾选“打印背景颜色和图像（C）”； b、在浏览器中找到“工具--->Internet选项--->高级--->打印”，勾选“打印背景颜色和图像”；以上两个地方必须全够勾选，缺少一个都打印不了。 5、题外话：设置默认打印机 打印的时候，通常情况下调用了打印的程序系统会自动连接电脑已经连接的打印机，并弹出框让选定打印机。而且每次测试某个打印功能时都要选这么一次，很麻烦。因此就很必要让浏览器记住我们的选择，主要分两步： a、设置默认打印机：控制面板--->硬件和声音--->设备和打印机，找到需要设置为默认打印机的打印机，右键，选择“设置为默认打印机（A）”，通常默认打印机上有一个绿色的勾选图标。 b、将当前功能所在网站添加到浏览器的可信站点中。如：在浏览器中找到“工具--->Internet选项--->安全--->可信站点“，站点，添加。如此之后，每次在该项目中使用打印功能，都会自动去查找默认打印机并自动打印。

二维码学习（四）：使用jquery生成二维码

猜你喜欢