Jquery 生成二維碼圖片 並且區域性列印
一：匯入jquery外掛
<script src="js/jquery.min.js"></script>
<script src="js/jquery.qrcode.min.js"></script>
<script src="jquery.jqprint-0.3.js"></script>
<script src="jquery.browser.js"></script>
HTML程式碼
<input type="button" value="點我生成二維碼並且列印" >
//將來生成二維碼放置的位置
<div id="output" style="width:380px;height:380px;padding: 15px;display: none">
</div>
//二維碼圖片單獨提取放置位置
<div id="fanh" title="二維碼" style="width:180px;height:180px;padding: 15px;display: none"
>
begin<p align="center"><img src='' id='myImg' alt="uu" style="height: 40px;width:40px;padding-top: 10px"/></p>end
</div>
JS程式碼：
//qrCode儲存二維碼資訊變數
function printQr(qrCode){
$('#output').empty();
$('#output').qrcode({width:150,height:150,correctLevel:0,text:utf16to8(qrCode)});
$("canvas").attr("id","erw");
var canvas = document.getElementById('erw');
var context = canvas.getContext('2d');
var image = new Image();
var strDataURI =canvas.toDataURL("image/png");
document.getElementById('myImg').src = strDataURI;
//判斷瀏覽器
if (!!window.ActiveXObject || "ActiveXObject" in window){
$('#myImg').css("width", '200px');
$('#myImg').css("height", '200px');
$("#myImg").jqprint();
/*
$("myImg").printArea();*/
}else{
$("#myImg").jqprint();
}
}
//處理漢字生成二維碼的缺點
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;
}
-------------補充
//列印div根據id
var newstr = document.getElementById('ss').innerHTML;
alert(newstr)
var oldstr = document.body.innerHTML;
document.body.innerHTML = newstr;
window.print();
document.body.innerHTML = oldstr;
return false;
//獲取整個頁面html程式碼，以sprnstr="<!--startprint-->";
eprnstr="<!--endprint-->"; 來區分列印
bdhtml=window.document.body.innerHTML;
sprnstr="<!--startprint-->";
eprnstr="<!--endprint-->";
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
案列已經整理：
附贈：js彈出遮罩DIV層DEMO
主體：根據資料生成二維碼，並且列印此二維碼
技術：js ,jquery ,jquery.jqprint-0.3.js來列印圖片，jquery.qrcode.min.js生成二維碼，另參雜多項前端小技術，例如：CANVAS轉換圖片，IMG新增id,js定時器，新視窗彈出....所有一應外掛均已完善，不用多餘下載和排除故障
本人新手，不喜勿噴！考慮好再下載！
http://download.csdn.net/detail/yjaspire/9439507