Jquery 生成二维码图片 并且局部打印

一:导入jquery插件




 

HTML代码


Jquery 生成二维码图片 并且局部打印_第1张图片

//将来生成二维码放置的位置

 

 

//二维码图片单独提取放置位置
 


Jquery 生成二维码图片 并且局部打印_第2张图片

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="";    
       eprnstr=""; 来区分打印

  bdhtml=window.document.body.innerHTML;    
       sprnstr="";    
       eprnstr="";    
       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


你可能感兴趣的:(前端)