wangyifang
/
patrol-wzgl-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

二维码

Browse Source
master
lion 3 years ago
parent e475c8572b
commit d33d59fb4c
2 changed files with 8082 additions and 279 deletions
Show Stats Download Patch File Download Diff File

7830
public/html2canvas.js
View File

File diff suppressed because one or more lines are too long

531
public/print.html
Unescape View File

@ -1,280 +1,253 @@
<!DOCTYPE html <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>打印</title> <title>打印</title>
<script language="javascript" src="/jquery-1.11.2.min.js"></script> <script language="javascript" src="/jquery-1.11.2.min.js"></script>
<script language="javascript" src="/jquery.qrcode.js"></script> <script language="javascript" src="/jquery.qrcode.js"></script>
<script language="javascript" src="/html2canvas.js"></script>
<script>
//二维码宽高 <script>
var qrcodewidth = 120; //二维码宽高
var qrcodeheight = 120; var qrcodewidth = 120;
var qrcodeleft = 30; var qrcodeheight = 120;
var qrcodetop = 50; var qrcodeleft = 30;
//canvas宽高 var qrcodetop = 50;
var canvaswidth = 340; //canvas宽高
var canvasheight = 188; var canvaswidth = 340;
//logo宽高 var canvasheight = 188;
var logowidth = 100; //logo宽高
var logoheight = 100; var logowidth = 100;
//文字描述位置 var logoheight = 100;
var textleft = qrcodewidth / 2; //文字描述位置
var texttop = qrcodeheight + 70; var textleft = qrcodewidth / 2;
//logo位置 var texttop = qrcodeheight + 70;
var logoleft = (qrcodewidth - logowidth) / 2; //logo位置
var logotop = (qrcodeheight - logoheight) / 2; var logoleft = (qrcodewidth - logowidth) / 2;
$(function() { var logotop = (qrcodeheight - logoheight) / 2;
var printObj = JSON.parse(getCookie('objs')) $(function() {
$(".wrap").html("") var printObj = JSON.parse(getCookie('objs'))
for (var i = 0; i < printObj.length; i++) { $(".wrap").html("")
var index = parseInt(i) + 1 for (var i = 0; i < printObj.length; i++) {
$(".wrap").append("<li id='page" + index + "' style='width: 9cm; height: 5cm;'>" + var index = parseInt(i) + 1
// "<img src='' style='display: block;width:9cm; height:5cm;'>"+ $(".wrap").append("<li id='page" + index + "' style='width: 9cm; height: 5cm;'>" +
"</li>") "<img src='' style='display: block;width:9cm; height:5cm;'>" +
createCode("#page" + index, printObj[i]) "</li>")
} createCode("#page" + index, printObj[i])
// createCode() }
console.log(printObj) // createCode()
}) console.log(printObj)
})
// 生成二维码
function utf16to8(str) { // 生成二维码
var out, i, len, c; function utf16to8(str) {
out = ""; var out, i, len, c;
len = str.length; out = "";
for (i = 0; i < len; i++) { len = str.length;
c = str.charCodeAt(i); for (i = 0; i < len; i++) {
if ((c >= 0x0001) && (c <= 0x007F)) { c = str.charCodeAt(i);
out += str.charAt(i); if ((c >= 0x0001) && (c <= 0x007F)) {
} else if (c > 0x07FF) { out += str.charAt(i);
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F)); } else if (c > 0x07FF) {
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F)); out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
} else { out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F)); } else {
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
} out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} }
return out; }
} return out;
}
function createCode(id, printObji) {
console.log(printObji) function createCode(id, printObji) {
var qrcode = $(id).qrcode({ console.log(printObji)
render: 'canvas', var qrcode = $(id).qrcode({
text: utf16to8(printObji['wuzibianma'] + "-" + printObji['id']), render: 'canvas',
width: qrcodewidth, text: utf16to8(printObji['wuzibianma'] + "-" + printObji['id']),
height: qrcodeheight, width: qrcodewidth,
background: '#ffffff', height: qrcodeheight,
foreground: '#000000', background: '#ffffff',
}); foreground: '#000000',
var canvas = qrcode.find('canvas').get(0); });
var img = new Image(); var canvas = qrcode.find('canvas').get(0);
img.src = canvas.toDataURL('image/png'); var img = new Image();
img.onload = function() { img.src = canvas.toDataURL('image/png');
canvas.width = canvaswidth; img.onload = function() {
canvas.height = canvasheight; canvas.width = canvaswidth;
var ctx = canvas.getContext('2d'); canvas.height = canvasheight;
var ctx = canvas.getContext('2d');
//设置文字样式 ctx.fillStyle = '#ffffff';
//设置画布背景 ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#ffffff'; //设置文字样式
ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#000000';
//设置文字样式 ctx.font = 'bold ' + 16 + 'px Arial';
ctx.fillStyle = '#000000'; ctx.textAlign = 'left';
ctx.font = 'bold ' + 16 + 'px Arial'; //文字描述
ctx.textAlign = 'left'; ctx.fillText("苏州河道处", 130, 30);
//文字描述 ctx.fillText("物资编码:" + decodeURI(decodeURI(printObji['wuzibianma'])), qrcodeleft + 140, 65);
ctx.fillText("苏州河道处", 130, 30); ctx.fillText("资产名称:" + decodeURI(decodeURI(printObji['zichanmingcheng'])), qrcodeleft + 140, 95);
ctx.fillText("物资编码:"+decodeURI(decodeURI(printObji['wuzibianma'])), qrcodeleft+140,65); ctx.fillText("物资类型:" + decodeURI(decodeURI(printObji['wuzileixing'])), qrcodeleft + 140, 125);
ctx.fillText("资产名称:"+decodeURI(decodeURI(printObji['zichanmingcheng'])), qrcodeleft+140,95); ctx.fillText("入库数量:" + printObji['rukushuliang'], qrcodeleft + 140, 155);
ctx.fillText("物资类型:"+decodeURI(decodeURI(printObji['wuzileixing'])), qrcodeleft+140,125); ctx.drawImage(img, qrcodeleft, qrcodetop);
ctx.fillText("入库数量:"+printObji['rukushuliang'], qrcodeleft+140,155); var data = canvas.toDataURL('image/png', 1);
//绘制二维码 var imgOk = new Image();
imgOk.src = data;
ctx.drawImage(img, qrcodeleft, qrcodetop); $(id).children('img').attr('src', imgOk.src)
// //设置logo $(id).children('canvas').remove()
// var logo = new Image(logowidth, logoheight); }
// logo.src = canvas; }
// logo.onload = function() {
// ctx.drawImage(logo, logoleft, logotop, logowidth, logoheight);
// }
} function doPrint(obj) {
console.log(img) if ($(obj).hasClass("disabled")) {
// img.src=canvas.toDataURL("image/png"); alert("已经打印过了，如要重新打印请刷新本页");
// $(id).children("img").attr("src",img.src) return false;
} }
$(obj).addClass("disabled");
var myDoc = {
settings: {
function doPrint(obj) { topMargin: 0,
if ($(obj).hasClass("disabled")) { leftMargin: 0,
alert("已经打印过了，如要重新打印请刷新本页"); bottomMargin: 0,
return false; rightMargin: 0
} }, // 设置上下左距页边距为10毫米，注意，单位是 1/10毫米
$(obj).addClass("disabled"); documents: document,
var myDoc = { marginIgnored: true,
settings: { copyrights: '杰创软件拥有版权 www.jatools.com'
topMargin: 0, };
leftMargin: 0, document.getElementById("jatoolsPrinter").print(myDoc, false); // 直接打印，不弹出打印机设置对话框
bottomMargin: 0, }
rightMargin: 0
}, // 设置上下左距页边距为10毫米，注意，单位是 1/10毫米 function delCookie(name)
documents: document,
marginIgnored: true, {
copyrights: '杰创软件拥有版权 www.jatools.com'
}; var exp = new Date();
document.getElementById("jatoolsPrinter").print(myDoc, false); // 直接打印，不弹出打印机设置对话框
var ids = "{:$_REQUEST['ids']}"; exp.setTime(exp.getTime() - 1);
var url = "{:U('confirmPrinted')}";
$.post(url, { var cval = getCookie(name);
ids: ids
}, function() { if (cval != null)
}); document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
}
function delCookie(name)
function getCookie(cookieName) {
{ //获取所有的cookie "psw=1234we; rememberme=true; user=Annie"
var totalCookie = document.cookie;
var exp = new Date(); //获取参数所在的位置
var cookieStartAt = totalCookie.indexOf(cookieName + "=");
exp.setTime(exp.getTime() - 1); //判断参数是否存在 不存在直接返回
if (cookieStartAt == -1) {
var cval = getCookie(name); return;
}
if (cval != null) //获取参数值的开始位置
var valueStartAt = totalCookie.indexOf("=", cookieStartAt) + 1;
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString(); //以;来获取参数值的结束位置
var valueEndAt = totalCookie.indexOf(";", cookieStartAt);
} //如果没有;则是最后一位
if (valueEndAt == -1) {
function getCookie(cookieName) { valueEndAt = totalCookie.length;
//获取所有的cookie "psw=1234we; rememberme=true; user=Annie" }
//截取参数值的字符串
var totalCookie = document.cookie; var cookieValue = unescape(totalCookie.substring(valueStartAt, valueEndAt));
//获取参数所在的位置 return cookieValue;
var cookieStartAt = totalCookie.indexOf(cookieName + "="); }
//判断参数是否存在 不存在直接返回 </script>
if (cookieStartAt == -1) { <style>
return; body {
} font-family: "微软雅黑";
//获取参数值的开始位置 font-size: 12px;
var valueStartAt = totalCookie.indexOf("=", cookieStartAt) + 1; padding: 0;
//以;来获取参数值的结束位置 margin: 0;
var valueEndAt = totalCookie.indexOf(";", cookieStartAt); background: #000;
//如果没有;则是最后一位 }
if (valueEndAt == -1) {
valueEndAt = totalCookie.length; ul,
} li {
//截取参数值的字符串 padding: 0;
var cookieValue = unescape(totalCookie.substring(valueStartAt, valueEndAt)); margin: 0;
return cookieValue; list-style: none;
} }
</script>
<style> .clear {
body { clear: both;
font-family: "微软雅黑"; }
font-size: 12px;
padding: 0; .bar {
margin: 0; position: fixed;
background: #000; top: 0;
} left: 0;
height: 60px;
ul, background: #333;
li { color: #fff;
padding: 0; line-height: 20px;
margin: 0; width: 100%;
list-style: none; }
}
.bar A {
.clear { color: #fff;
clear: both; text-decoration: underline;
} }
.bar { .bar A:hover {
position: fixed; text-decoration: none;
top: 0; color: #ccc;
left: 0; }
height: 60px;
background: #333; .bar .wp {
color: #fff; width: 1000px;
line-height: 20px; margin: auto;
width: 100%; position: relative;
} }
.bar A { .bar .wp .left {
color: #fff; float: left;
text-decoration: underline; }
}
.bar .wp .right {
.bar A:hover { float: right;
text-decoration: none; padding-top: 20px;
color: #ccc; }
}
.lists {
.bar .wp { padding-top: 80px;
width: 1000px; padding-bottom: 20px;
margin: auto;
position: relative; }
}
.lists li {
.bar .wp .left { // float: left;
float: left; margin-left: 20px;
} margin-bottom: 10px;
}
.bar .wp .right { </style>
float: right; </head>
padding-top: 20px; <body>
} <div class="lists">
<ul class="wrap">
.lists {
padding-top: 80px; <div class="clear"></div>
padding-bottom: 20px; </ul>
</div>
} <div class="bar">
<div class="wp">
.lists li { <div class="left">生成打印单<br />
// float: left; 本打印功能只能在IE浏览器使用，非IE浏览器请采用兼容模式<br />
margin-left: 20px; 使用之前需要安装插件（<a href="/jatoolsPrinter_free.zip" target="_blank">点击下载</a>），并正确设置打印机
margin-bottom: 10px; </div>
} <div class="right">
</style> <input type="button" value="打印" onClick='doPrint(this);'>
</head> </div>
<body> </div>
<div class="lists"> </div>
<ul class="wrap"> <OBJECT ID="jatoolsPrinter" CLASSID="CLSID:B43D3361-D075-4BE2-87FE-057188254255"
codebase="jatoolsPrinter.cab#version=8,6,0,0">
</OBJECT>
<!-- <li id="page2" style="width: 9cm; height: 5cm;"> </body>
<img src="/storage/temp/755_1.jpg" style=" display: block;width:9cm; height:5cm;">
</li>
<li id="page3" style="width: 9cm; height: 5cm;">
<img src="/storage/temp/756_1.jpg" style=" display: block;width:9cm; height:5cm;">
</li>
<li id="page4" style="width: 9cm; height: 5cm;">
<img src="/storage/temp/757_1.jpg" style=" display: block;width:9cm; height:5cm;">
</li> -->
<div class="clear"></div>
</ul>
</div>
<div class="bar">
<div class="wp">
<div class="left">生成打印单<br />
本打印功能只能在IE浏览器使用，非IE浏览器请采用兼容模式<br />
使用之前需要安装插件（<a href="/jatoolsPrinter_free.zip" target="_blank">点击下载</a>），并正确设置打印机
</div>
<div class="right">
<input type="button" value="打印" onClick='doPrint(this);'>
</div>
</div>
</div>
<OBJECT ID="jatoolsPrinter" CLASSID="CLSID:B43D3361-D075-4BE2-87FE-057188254255"
codebase="jatoolsPrinter.cab#version=8,6,0,0">
</OBJECT>
</body>
</html> </html>

Write Preview
Loading…
Cancel
Save