前言
如今二维码在生活中十分常用,支付扫一扫,长按可识别。那么在项目可能就会遇到需要有编号、链接等需要生成二维码的场景,这里我的项目里就有遇到编号需要生成二维码并打印的场景出现,这里介绍一下我使用js生成二维码并解决IE8浏览器下canvas控件的兼容性处理问题。
导入的生成二维码的js插件:jquery.qrcode.min.js
该插件其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式。
GitHub地址:https://github.com/jeromeetienne/jquery-qrcode
下面介绍怎么使用这个插件:
一、jquery.qrcode.min.js的使用
1、在页面中引用jquery.js和jquery.qrcode.min.js
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
2、页面中需要显示二维码的地方加上div
<div id="qrcode"></div>
3、在js中调用控件显示二维码在div中
//canvas 模式
var qrcode = $('#qrcode').qrcode({
render: 'canvas', //canvas模式
width: 90, //宽度
height: 90, //高度
text: "生成二维码的内容,可为变量" //生成二维码的内容
});
要注意canvas控件是HTML5特有的控件,需在IE9及以上浏览器或谷歌内核浏览器内才能正常显示,若是使用IE8及以下浏览器,则不能使用canvas控件,需使用table模式生成二维码。
//table 模式兼容 IE低版本
$('#qrcode').qrcode({
render: 'table', //table模式
width: 90, //宽度
height: 90, //高度
text: "生成二维码的内容,可为变量" //生成二维码的内容
});
注意,使用table模式在老版本浏览器下生成二维码存在一个问题,在需要打印页面的时候,打印预览页面无法显示二维码,打印出来的纸张上也不显示二维码,如果你在使用老版本的浏览器并且需要打印该二维码,请往下看。
二、canvas在IE8的兼容性问题
上面说到了使用jquery.qrcode.min.js以table模式生成二维码在打印的时候无法正常显示,而canvas模式又仅支持高版本的IE浏览器和谷歌浏览器,那么如果在特定的时候只能使用低版本的IE浏览器生成二维码又需要打印的时候该怎么办呢?
我们首先来研究一下canvas控件,canvas是HTML5的一种画板组件,在IE8下使用canvas进行图片渲染时,js会报错,提示不支持getContext方法。也就是说如果想已这种模式生成二维码,必须要能支持HTML5,那么可以让低版本的浏览器兼容HTML5吗?答案是肯定的。所以我们首先需要让IE8浏览器兼容HTML5。
这里需要用到另一个强大的插件:excanvas.compiled.js
解压缩excanvas_r3.zip得到,这个插件可以直接让IE8等IE浏览器支持canvas控件,提供了低版本ie浏览器不支持canvas的解决方案。
插件的下载地址:http://explorercanvas.googlecode.com/files/excanvas_r3.zip
这个插件由于在墙外,可能需要自行翻墙下载,没办法翻墙的小伙伴可以直接下载我混合好的js文件。
excanvas.qrcode.mix.js
下载地址:https://download.csdn.net/download/dante_feng/11985412
使用方法与上述jquery.qrcode.min.js类似,使用这个我混合好的插件可以直接在低版本IE浏览器下使用canvas模式生成二维码,解决打印不出二维码的问题。
注意:之前说无法使用的童鞋们,请注意一定按照如下说明进行使用,IE8亲测可用,二维码完美支持打印。
excanvas.qrcode.mix.js使用方法:
1、引用文件
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="excanvas.qrcode.mix.js"></script>
注意:
(1) jQuery为必须引用的js文件,仅2.0以下版本的jQuery支持IE8浏览器;
jQuery-1.11.3.min.js下载地址:https://download.csdn.net/download/dante_feng/19899362
(2) 引用js需在head内引用,不要在body内引用。
2、页面中需要显示二维码的地方加上div
<div id="qrcode"></div>
3、在js中调用控件显示二维码在div中
//设置二维码
function setQrcode(){
//canvas 模式,兼容低版本浏览器
var qrcode = $('#qrcode').qrcode({
render: 'canvas',
width: 90,
height: 90,
text: "转为二维码的内容,可为变量"
});
}
注意:
setQrcode方法需在页面加载完毕后的方法内执行,如放在 $(document).ready(function(){ }); 方法内执行。
页面demo代码如下:
<%@ page contentType="text/html; charset=UTF-8"%>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>qrcode</title>
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/excanvas.qrcode.mix.js"></script>
</head>
<body>
<form>
<div id="qrcode"></div>
</form>
<script type="text/javascript">
//页面加载完成后执行
$(document).ready(function(){
setQrcode();
});
//设置二维码
function setQrcode(){
//canvas 模式,兼容低版本浏览器
var qrcode = $('#qrcode').qrcode({
render: 'canvas',
width: 90,
height: 90,
text: "转为二维码的内容,可为变量"
});
}
</script>
</body>
</html>
注意:
HTML头部使用 <%@ page contentType="text/html; charset=UTF-8"%>
这样即使在低版本IE浏览器下也可以使用canvas模式生成二维码了,解决了低版本浏览器打印不显示二维码的问题。
IE8浏览器下二维码显示效果如下: