Getting text to print via script

Viewed 67

hey guys new here and self teaching myself. I have a code that takes form inputs and converts it into a text blob so my thermal printer can print a label. The script works great I am trying to figure out a way to print either to a print window (the txt code generated) or when I click generate label button directly send to a network printer with the ip of 10.100.2.200. Basically cut down a few steps. Thanks

Here is the page with the code

www.papaslabels.com

<!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';
            

        
        
        // Convert the text to BLOB.
        const textToBLOB = new Blob([data], { type: 'text/plain' });
        const sFileName = 'Label.txt';     // The file to save the data.

        let newLink = document.createElement("a");
        newLink.print = sFileName;

        if (window.webkitURL != null) {
            newLink.href = window.webkitURL.createObjectURL(textToBLOB);
        }
        else {
            newLink.href = window.URL.createObjectURL(textToBLOB);
            newLink.style.display = "none";
            document.body.appendChild(newLink);
        }

        newLink.click(); 
    }
</script>
</html>
1 Answers

This is a possibile solution for direct print. The trick is to use this printZpl function to direct print your ZPL data:

    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)
Related