BADGEPRINT CALL
Calling Method
badgeprint.html?BadgeFile=URL
URL –a static html file name with relative path of Badge Print Template
Mandatory: Need to a DIV named with “BadgeTemplate” into static Badge Template File. This DIV will contain Printable
Data of a Badge.
A Sample Static HTML Badge File is below:
<!DOCTYPE html>
<html>
<body>
<div id=BadgeTemplate>
<p style="text-align:center"><img alt="" src="https://yt3.ggpht.com/a/AGF-l7BBIcC888A2qYc3rB44rST01IEYDG3uzbU_A=s900-c-k-c0xffffffff-no-rj-mo"
style="height:25px; width:25px" />&nbsp; &nbsp;&nbsp;<span style="fontsize:22px">VISITOR</span></p>
<p style="text-align:center"><span style="font-size:22px">Jef Verhagen</span></p>
<p style="text-align:center"><span style="font-size:22px">Host: Valon Miski</span></p>
</div>
</body>
</html>
BatchPrint.html
<!DOCTYPE html>
<html>
<head>
<title>Label Print</title>
<link rel="stylesheet" type="text/css" href="badgeprint.css">
<script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="print.js"></script>
<script>
function getQueryStringValue (key) {
return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(key).replace(/[\.\+\*]/g,
"\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}
</script>
</head>
<body ng-app="printModule" ng-controller="printCtrl">
<div ng-init='printMe()'>
<div class="page">
<div class="page-break">
<div align="Center" class="subpage">
<div id=BadgePrint></div>
</div>
</div>
</div>
</div>
<script>
var badgetemplate=getQueryStringValue("BadgeFile");
$( "#BadgePrint" ).load(badgetemplate + " #BadgeTemplate" );
</script>
</body>
</html>
Print.js
angular
.module('printModule', [])
.controller('printCtrl', function ($scope) {
$scope.printMe = function(){
window.print(); }
});
Badgeprint.css
body {
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 16pt "Tahoma";
}
*{
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page {
width: 100mm;
min-height: 58mm;
padding: 0mm;
margin: 0mm auto;
border: 2px #D3D3D3 solid;
border-radius: 2px;
background: white;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}
.subpage {
padding: 0mm;
border: 2px red solid;
height: 58mm;
outline: 0mm #FFEAEA solid;
}
@page {
size: 100mm 58mm;
margin: 0mm;
}
div.page-break { display: block; page-break-before: always; }
@media print {
.page {
margin: 1;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}