如今二維碼在生活中十分常用，支付掃一掃，長按可識別。那麼在項目可能就會遇到需要有編號、鏈接等需要生成二維碼的場景，這裏我的項目裏就有遇到編號需要生成二維碼並打印的場景出現，這裏介紹一下我使用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模式生成二維碼，解決打印不出二維碼的問題。
1、引用文件
<script type="text/javascript" src="excanvas.qrcode.mix.js"></script>
2、頁面中需要顯示二維碼的地方加上div
<div id="qrcode"></div>
3、在js中調用控件顯示二維碼在div中
//canvas 模式，兼容低版本瀏覽器
var qrcode = $('#qrcode').qrcode({
render: 'canvas',
width: 90,
height: 90,
text: "轉爲二維碼的內容，可爲變量"
});
這樣即使在低版本IE瀏覽器下也可以使用canvas模式生成二維碼了，解決了低版本瀏覽器打印不顯示二維碼的問題。