使用Jquery.qrcode.js及Lodop控制元件生成及列印二維碼
阿新 • • 發佈：2019-02-19
<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>