Working version

index.html

@@ -25,7 +25,10 @@
         <div class="row">
             <div class="col">
                 <button class="btn btn-success render">
-                    Render
+                    Render ZPL
+                </button>
+                <button class="btn btn-success print">
+                    Print
                 </button>
             </div>
             <div class="col">
@@ -40,6 +43,8 @@
 
 
 <script>
+    let selectedDevice = null;
+
     function createHooks() {
         document.querySelector("button.render").addEventListener("click", (e) => {
             const options = {
@@ -54,10 +59,29 @@
                 document.querySelector(`textarea[name="zpl"]`).value = zpl;
             });
         });
+
+        document.querySelector("button.print").addEventListener("click", (e) => {
+            if (!selectedDevice) {
+                console.error("Device not selected");
+            }
+            const zpl = document.querySelector(`textarea[name="zpl"]`).value;
+            selectedDevice.send(zpl, undefined, (error) => {
+                console.error(error);
+            })
+        });
+
     }
 
     (function () {
         createHooks();
+
+        getAvailablePrinters().then(devices => {
+            if (devices) {
+                selectedDevice = devices[0];
+
+            }
+        })
+
     })();
 </script>