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
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>打印</title>
<script language="javascript" src="/jquery-1.11.2.min.js"></script>
<script language="javascript" src="/jquery.qrcode.js"></script>
<script>
//二维码宽高
var qrcodewidth = 120;
var qrcodeheight = 120;
var qrcodeleft = 30;
var qrcodetop = 50;
//canvas宽高
var canvaswidth = 340;
var canvasheight = 188;
//logo宽高
var logowidth = 100;
var logoheight = 100;
//文字描述位置
var textleft = qrcodewidth / 2;
var texttop = qrcodeheight + 70;
//logo位置
var logoleft = (qrcodewidth - logowidth) / 2;
var logotop = (qrcodeheight - logoheight) / 2;
$(function() {
var printObj = JSON.parse(getCookie('objs'))
$(".wrap").html("")
for (var i = 0; i < printObj.length; i++) {
var index = parseInt(i) + 1
$(".wrap").append("<li id='page" + index + "' style='width: 9cm; height: 5cm;'>" +
// "<img src='' style='display: block;width:9cm; height:5cm;'>"+
"</li>")
createCode("#page" + index, printObj[i])
}
// createCode()
console.log(printObj)
})
// 生成二维码
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;
}
function createCode(id, printObji) {
console.log(printObji)
var qrcode = $(id).qrcode({
render: 'canvas',
text: utf16to8(printObji['wuzibianma'] + "-" + printObji['id']),
width: qrcodewidth,
height: qrcodeheight,
background: '#ffffff',
foreground: '#000000',
});
var canvas = qrcode.find('canvas').get(0);
var img = new Image();
img.src = canvas.toDataURL('image/png');
img.onload = function() {
canvas.width = canvaswidth;
canvas.height = canvasheight;
var ctx = canvas.getContext('2d');
//设置文字样式
//设置画布背景
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
//设置文字样式
ctx.fillStyle = '#000000';
ctx.font = 'bold ' + 16 + 'px Arial';
ctx.textAlign = 'left';
//文字描述
ctx.fillText("苏州河道处", 130, 30);
ctx.fillText("物资编码:"+decodeURI(decodeURI(printObji['wuzibianma'])), qrcodeleft+140,65);
ctx.fillText("资产名称:"+decodeURI(decodeURI(printObji['zichanmingcheng'])), qrcodeleft+140,95);
ctx.fillText("物资类型:"+decodeURI(decodeURI(printObji['wuzileixing'])), qrcodeleft+140,125);
ctx.fillText("入库数量:"+printObji['rukushuliang'], qrcodeleft+140,155);
//绘制二维码
ctx.drawImage(img, qrcodeleft, qrcodetop);
// //设置logo
// var logo = new Image(logowidth, logoheight);
// logo.src = canvas;
// logo.onload = function() {
// ctx.drawImage(logo, logoleft, logotop, logowidth, logoheight);
// }
}
console.log(img)
// img.src=canvas.toDataURL("image/png");
// $(id).children("img").attr("src",img.src)
}
function doPrint(obj) {
if ($(obj).hasClass("disabled")) {
alert("已经打印过了，如要重新打印请刷新本页");
return false;
}
$(obj).addClass("disabled");
var myDoc = {
settings: {
topMargin: 0,
leftMargin: 0,
bottomMargin: 0,
rightMargin: 0
}, // 设置上下左距页边距为10毫米，注意，单位是 1/10毫米
documents: document,
marginIgnored: true,
copyrights: '杰创软件拥有版权 www.jatools.com'
};
document.getElementById("jatoolsPrinter").print(myDoc, false); // 直接打印，不弹出打印机设置对话框
var ids = "{:$_REQUEST['ids']}";
var url = "{:U('confirmPrinted')}";
$.post(url, {
ids: ids
}, function() {
});
}
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null)
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
function getCookie(cookieName) {
//获取所有的cookie "psw=1234we; rememberme=true; user=Annie"
var totalCookie = document.cookie;
//获取参数所在的位置
var cookieStartAt = totalCookie.indexOf(cookieName + "=");
//判断参数是否存在 不存在直接返回
if (cookieStartAt == -1) {
return;
}
//获取参数值的开始位置
var valueStartAt = totalCookie.indexOf("=", cookieStartAt) + 1;
//以;来获取参数值的结束位置
var valueEndAt = totalCookie.indexOf(";", cookieStartAt);
//如果没有;则是最后一位
if (valueEndAt == -1) {
valueEndAt = totalCookie.length;
}
//截取参数值的字符串
var cookieValue = unescape(totalCookie.substring(valueStartAt, valueEndAt));
return cookieValue;
}
</script>
<style>
body {
font-family: "微软雅黑";
font-size: 12px;
padding: 0;
margin: 0;
background: #000;
}
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
.clear {
clear: both;
}
.bar {
position: fixed;
top: 0;
left: 0;
height: 60px;
background: #333;
color: #fff;
line-height: 20px;
width: 100%;
}
.bar A {
color: #fff;
text-decoration: underline;
}
.bar A:hover {
text-decoration: none;
color: #ccc;
}
.bar .wp {
width: 1000px;
margin: auto;
position: relative;
}
.bar .wp .left {
float: left;
}
.bar .wp .right {
float: right;
padding-top: 20px;
}
.lists {
padding-top: 80px;
padding-bottom: 20px;
}
.lists li {
// float: left;
margin-left: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="lists">
<ul class="wrap">
<!-- <li id="page2" style="width: 9cm; height: 5cm;">
<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>
<!DOCTYPE html
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>打印</title>
<script language="javascript" src="/jquery-1.11.2.min.js"></script>
<script language="javascript" src="/jquery.qrcode.js"></script>
<script language="javascript" src="/html2canvas.js"></script>
<script>
//二维码宽高
var qrcodewidth = 120;
var qrcodeheight = 120;
var qrcodeleft = 30;
var qrcodetop = 50;
//canvas宽高
var canvaswidth = 340;
var canvasheight = 188;
//logo宽高
var logowidth = 100;
var logoheight = 100;
//文字描述位置
var textleft = qrcodewidth / 2;
var texttop = qrcodeheight + 70;
//logo位置
var logoleft = (qrcodewidth - logowidth) / 2;
var logotop = (qrcodeheight - logoheight) / 2;
$(function() {
var printObj = JSON.parse(getCookie('objs'))
$(".wrap").html("")
for (var i = 0; i < printObj.length; i++) {
var index = parseInt(i) + 1
$(".wrap").append("<li id='page" + index + "' style='width: 9cm; height: 5cm;'>" +
"<img src='' style='display: block;width:9cm; height:5cm;'>" +
"</li>")
createCode("#page" + index, printObj[i])
}
// createCode()
console.log(printObj)
})
// 生成二维码
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;
}
function createCode(id, printObji) {
console.log(printObji)
var qrcode = $(id).qrcode({
render: 'canvas',
text: utf16to8(printObji['wuzibianma'] + "-" + printObji['id']),
width: qrcodewidth,
height: qrcodeheight,
background: '#ffffff',
foreground: '#000000',
});
var canvas = qrcode.find('canvas').get(0);
var img = new Image();
img.src = canvas.toDataURL('image/png');
img.onload = function() {
canvas.width = canvaswidth;
canvas.height = canvasheight;
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
//设置文字样式
ctx.fillStyle = '#000000';
ctx.font = 'bold ' + 16 + 'px Arial';
ctx.textAlign = 'left';
//文字描述
ctx.fillText("苏州河道处", 130, 30);
ctx.fillText("物资编码:" + decodeURI(decodeURI(printObji['wuzibianma'])), qrcodeleft + 140, 65);
ctx.fillText("资产名称:" + decodeURI(decodeURI(printObji['zichanmingcheng'])), qrcodeleft + 140, 95);
ctx.fillText("物资类型:" + decodeURI(decodeURI(printObji['wuzileixing'])), qrcodeleft + 140, 125);
ctx.fillText("入库数量:" + printObji['rukushuliang'], qrcodeleft + 140, 155);
ctx.drawImage(img, qrcodeleft, qrcodetop);
var data = canvas.toDataURL('image/png', 1);
var imgOk = new Image();
imgOk.src = data;
$(id).children('img').attr('src', imgOk.src)
$(id).children('canvas').remove()
}
}
function doPrint(obj) {
if ($(obj).hasClass("disabled")) {
alert("已经打印过了，如要重新打印请刷新本页");
return false;
}
$(obj).addClass("disabled");
var myDoc = {
settings: {
topMargin: 0,
leftMargin: 0,
bottomMargin: 0,
rightMargin: 0
}, // 设置上下左距页边距为10毫米，注意，单位是 1/10毫米
documents: document,
marginIgnored: true,
copyrights: '杰创软件拥有版权 www.jatools.com'
};
document.getElementById("jatoolsPrinter").print(myDoc, false); // 直接打印，不弹出打印机设置对话框
}
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null)
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
function getCookie(cookieName) {
//获取所有的cookie "psw=1234we; rememberme=true; user=Annie"
var totalCookie = document.cookie;
//获取参数所在的位置
var cookieStartAt = totalCookie.indexOf(cookieName + "=");
//判断参数是否存在 不存在直接返回
if (cookieStartAt == -1) {
return;
}
//获取参数值的开始位置
var valueStartAt = totalCookie.indexOf("=", cookieStartAt) + 1;
//以;来获取参数值的结束位置
var valueEndAt = totalCookie.indexOf(";", cookieStartAt);
//如果没有;则是最后一位
if (valueEndAt == -1) {
valueEndAt = totalCookie.length;
}
//截取参数值的字符串
var cookieValue = unescape(totalCookie.substring(valueStartAt, valueEndAt));
return cookieValue;
}
</script>
<style>
body {
font-family: "微软雅黑";
font-size: 12px;
padding: 0;
margin: 0;
background: #000;
}
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
.clear {
clear: both;
}
.bar {
position: fixed;
top: 0;
left: 0;
height: 60px;
background: #333;
color: #fff;
line-height: 20px;
width: 100%;
}
.bar A {
color: #fff;
text-decoration: underline;
}
.bar A:hover {
text-decoration: none;
color: #ccc;
}
.bar .wp {
width: 1000px;
margin: auto;
position: relative;
}
.bar .wp .left {
float: left;
}
.bar .wp .right {
float: right;
padding-top: 20px;
}
.lists {
padding-top: 80px;
padding-bottom: 20px;
}
.lists li {
// float: left;
margin-left: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="lists">
<ul class="wrap">
<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>

Write Preview
Loading…
Cancel
Save