Skip to content

Instantly share code, notes, and snippets.

@loretoparisi

loretoparisi/index.html

Forked from Lakerfield/index.html
Created November 19, 2021 22:53
Show Gist options
  • Save loretoparisi/8c65a07089af0420f8214fcd30623006 to your computer and use it in GitHub Desktop.
Save loretoparisi/8c65a07089af0420f8214fcd30623006 to your computer and use it in GitHub Desktop.
Download ZIP
Print ZPL from browser
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Print Inventory Labels at Papa's</title>
<style>
* {
box-sizing: border-box;
}
div {
padding: 10px;
background-color: #f6f6f6;
overflow: hidden;
}
input[type=text],
textarea,
select {
font: 17px Calibri;
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type=button] {
font: 17px Calibri;
width: auto;
float: right;
cursor: pointer;
padding: 7px;
}
.container {
width: 100%;
margin: 3.2rem auto 0 auto;
}
@media(min-width: 576px) {
.container {
max-width: 540px;
}
}
@media(min-width: 768px) {
.container {
max-width: 720px
}
</style>
</head>
<body>
<div>
<div class="container">
<div align="center">
<!--Add few elements to the form-->
<img src="https://www.papasjeepram.com/wp-content/uploads/2019/09/logo2.jpg" width="500" height="189">
</div>
<h2>Enter Values to Generate Stock Label</h2>
<div>
<input type="text" onkeyup="this.value = this.value.toUpperCase();" id="txtStock" placeholder="Stock Number" />
</div>
<div>
<input type="text" onkeyup="this.value = this.value.toUpperCase();" id="txtVin" maxlength="17" placeholder="Vin" />
</div>
<div>
<input type="text" onkeyup="this.value = this.value.toUpperCase();" id="txtYear" maxlength="4" placeholder="Year" />
</div>
<div>
<input type="text" onkeyup="this.value = this.value.toUpperCase();" id="txtMake" placeholder="Make" />
</div>
<div>
<input type="text" onkeyup="this.value = this.value.toUpperCase();" id="txtModel" placeholder="Model" />
</div>
<div>
<input type="text" onkeyup="this.value = this.value.toUpperCase();" id="txtColor" placeholder="Color" />
</div>
<div>
<div align="left">
<input type="button" id="bt" value="Generate Label" onclick="saveFile()" />
</div>
</div>
</div>
</body>
<script>
let saveFile = () => {
// Get the data from each element on the form.
const Stock = document.getElementById('txtStock');
const Vin = document.getElementById('txtVin');
const Year = document.getElementById('txtYear');
const Make = document.getElementById('txtMake');
const Model = document.getElementById('txtModel');
const Color = document.getElementById('txtColor');
// This variable stores all the data.
let data =
'\r^XA\n' +
'^A0,213\n' +
'^FO25,35^FD' + Stock.value + '^FS \r\n ' +
'^BY3,2,225\n' +
'^FO45,220^BC^FD' + Vin.value + '^FS \r\n ' +
'^A0,50\n' +
'^FO45,500^FD' + Year.value + ' ' + Make.value + ' ' + Model.value + ' ' + Color.value + ' ^FS \r\n ' +
'^A0,55\n' +
'^FO435,630^FD' + Stock.value + '^FS \r\n ' +
'^A0,50\n' +
'^FO275,630^FD' + Year.value + '^FS \r\n ' +
'^A0,55\n' +
'^FO45,630^FD' + Stock.value + '^FS \r\n ' +
'^A0,50\n' +
'^FO695,630^FD' + Year.value + '^FS \r\n ' +
'^A0,55\n' +
'^FO435,835^FD' + Stock.value + '^FS \r\n ' +
'^A0,50\n' +
'^FO275,835^FD' + Year.value + '^FS \r\n ' +
'^A0,55\n' +
'^FO45,835^FD' + Stock.value + '^FS \r\n ' +
'^A0,50\n' +
'^FO695,835^FD' + Year.value + '^FS \r\n ' +
'^A0,30\n' +
'^FO45,705^FD' + Make.value + ' ' + Model.value + '^FS \r\n ' +
'^A0,30\n' +
'^FO45,745^FD' + Vin.value + '^FS \r\n ' +
'^A0,30\n' +
'^FO45,780^FD' + Color.value + '^FS \r\n ' +
'^A0,30\n' +
'^FO435,705^FD' + Make.value + ' ' + Model.value + '^FS \r\n ' +
'^A0,30\n' +
'^FO435,745^FD' + Vin.value + '^FS \r\n ' +
'^A0,30\n' +
'^FO435,780^FD' + Color.value + '^FS \r\n ' +
'^A0,30\n' +
'^FO40,900^FD' + Make.value + ' ' + Model.value + '^FS \r\n ' +
'^A0,30\n' +
'^FO40,940^FD' + Vin.value + '^FS \r\n ' +
'^A0,30\n' +
'^FO40,975^FD' + Color.value + '^FS \r\n ' +
'^A0,30\n' +
'^FO435,900^FD' + Make.value + ' ' + Model.value + '^FS \r\n ' +
'^A0,30\n' +
'^FO435,940^FD' + Vin.value + '^FS \r\n ' +
'^A0,30\n' +
'^FO435,975^FD' + Color.value + '^FS \r\n ' +
'^XZ';
function printZpl(zpl) {
var printWindow = window.open();
printWindow.document.open('text/plain')
printWindow.document.write(zpl);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
printZpl(data)
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment