使用Jquery.qrcode.js及Lodop控件生成及打印二维码

最新推荐文章于 2020-12-16 16:54:55 发布

TivonaLH

最新推荐文章于 2020-12-16 16:54:55 发布

阅读量4.7k

点赞数 1

分类专栏： javaScript javaScript，Web前端文章标签： Lodop Jquery.qrcode

本文链接：https://blog.csdn.net/TivonaLH/article/details/80181974

版权

javaScript 同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

javaScript，Web前端

11 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta charset="utf-8">
<title>二维码打印</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <script src="<%=basePath %>resources/components/laydate/laydate.js"></script>
  <script language="javascript" src="/jzfw_easyui/ss/js/jquery-1.4.4.min.js" charset="utf-8"></script>
  <script language="javascript" src="/jzfw_easyui/ss/js/jquery.jqprint-0.3.js" charset="utf-8"></script>
    
 <style type="text/css">
  		td{
  			text-align: center;
  		}
  		.layui-input, .layui-textarea, .layui-select {
		    height: 25px;
		    line-height: 25px;
		    border: 1px solid #e6e6e6;
		    background-color: #fff;
		    border-radius: 2px;
		}
		.layui-form-select .layui-input {
   			padding-right: 0px;
    		cursor: pointer;
		}
  </style> 
</head>
<body>

<input type="button" onclick="print()" value="点我生成二维码并且打印" style="padding:5px 10px;"/>
  <!--<div id=""  style="width:380px;height:380px;padding: 15px;">  --> 
</div>

<div class="layui-layout layui-layout-admin" id="editDiv">
       <div id="code"></div>
  </div>
  <div id="output"  style="width:380px;height:380px;padding: 15px;"> 
  
</div>
<div id="fanh"  title="二维码" style="width:180px;height:180px;padding: 15px;display: none;text-align: center;"   
       ><img src='' id='myImg'  alt="uu" style="height: 160px;width:160px;"/> 
</div> 

<input type="hidden" id="saleid" name="saleid" value="${sale.id}" />  
<script src="/layui/layui.js" charset="utf-8"></script> 
<script src="/layui/layuiTable.js" charset="utf-8"></script> 
<script src="/jzfw_easyui/ss/js/myUtils.js" charset="utf-8"></script>
<script type="text/javascript" src="/zfw_easyui/ss/js/jquery.qrcode.min.js"></script>
<script language="javascript" src="/jzfw_easyui/ss/js/lodop/LodopFuncs.js" charset="utf-8"></script> 
<script>
 var LODOP;
 var id= $("#saleid").val();
    alert(id);
    //打印div根据id
   var  url="<%=basePath%>/front/frontAction!getFishInfo.action?id="+id;//要打印的连接
   alert(url);
   function print(){
    $('#output').empty();
    $('#output').qrcode({
     width:150,height:150,
     correctLevel:0,
     render: "canvas",
     text:url
     });
      $("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');
    CreateOneFormPage();
    LODOP.PREVIEW();
    //$("#myImg").jqprint(); 
    
    /*  $("myImg").printArea();*/
  }else{
  CreateOneFormPage();
  LODOP.PREVIEW();
  //$("#myImg").jqprint();  
    
  }

     
   } 
    function CreateOneFormPage(){
		LODOP=getLodop();  
		LODOP.PRINT_INIT("打印销售情况二维码");
		LODOP.SET_PRINT_STYLE("FontSize",18);
		LODOP.SET_PRINT_STYLE("Bold",1);
		LODOP.SET_PRINT_PAGESIZE(0,0,0,'A4');
		//LODOP.ADD_PRINT_TEXT(50,150,260,39,"销售情况二维码");
		LODOP.ADD_PRINT_IMAGE(100,100,200,200,document.getElementById("fanh").innerHTML);
	};
    
<%--   $(function() {// 初始化内容
  var  url="front/frontAction!getFishInfo.action";
      $('#output').empty(); 
       $('#output').qrcode({
       width:150,height:150,
       correctLevel:0,
       text:url
       });
      
    });  --%>
            
     /*   $('#code').qrcode({  
        render: 'table',  
        width: 100,  
        height: 100,  
        text: 'http://blog.csdn.net/u011127019'  
    });  
    	function print(){
		$("#editDiv").jqprint();
	} */
    
    
</script>
</body>
</html>

问题：由于最新谷歌浏览器不支持NP插件，导致LODOP控件无法使用，解决方案可以参照http://blog.sina.com.cn/s/blog_721e77e50102vij3.html

可以直接上官网下载LODOP打印控件及云打印控件一起部署来解决谷歌浏览器不支持LODOP插件问题

TivonaLH

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用Jquery.qrcode.js及Lodop控件生成及打印二维码

&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;二维码打印&lt;/title&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt;meta name
复制链接

扫一扫