ब्राउज़र से ESC/POS प्रिंटिंग: एक डेवलपर की मार्गदर्शिका

ब्राउज़र प्रिंटिंग समस्या

यदि आपने कभी किसी वेब ऐप से रसीद प्रिंट करने की कोशिश की है, तो आप दर्द जानते हैं: window.print() एक प्रिंट डायलॉग खोलता है, पेज को पीडीएफ के रूप में रेंडर करता है, और ऑटो-कट या कस्टम पेपर चौड़ाई जैसे ईएससी/पीओएस कमांड के लिए शून्य समर्थन है।

थर्मल रसीद प्रिंटर के लिए, यह एक डील-ब्रेकर है। आपको चाहिए:

साइलेंट प्रिंटिंग — कोई डायलॉग नहीं, कोई उपयोगकर्ता इंटरैक्शन नहीं
ईएससी/पीओएस कमांड — ऑटो-कट, बोल्ड टेक्स्ट, अलाइनमेंट, बारकोड के लिए
विश्वसनीय एन्कोडिंग — आपके प्रिंटर के लिए सही कोड पेज पर यूटीएफ-8
क्रॉस-प्लेटफ़ॉर्म सपोर्ट — मैक, विंडोज, लिनक्स

समाधान एक स्थानीय वेबसॉकेट ब्रिज है — एक छोटा बैकग्राउंड ऐप जो उपयोगकर्ता के कंप्यूटर पर चलता है, आपके वेब ऐप से प्रिंट जॉब स्वीकार करता है, और प्रिंटर को रॉ ईएससी/पीओएस कमांड भेजता है।

वेबसॉकेट ब्रिज कैसे काम करता है

आपका वेब ऐप → वेबसॉकेट (ws://localhost:8765) → प्रिंट एजेंट → थर्मल प्रिंटर

प्रवाह सरल है:

आपका वेब ऐप ws://localhost:8765 से एक वेबसॉकेट कनेक्शन खोलता है
आप रसीद का वर्णन करने वाला एक JSON पेलोड भेजते हैं
प्रिंट एजेंट इसे ईएससी/पीओएस में परिवर्तित करता है और प्रिंटर को भेजता है
प्रिंटर चुपचाप प्रिंट करता है — कोई डायलॉग नहीं, कोई ड्राइवर इंटरैक्शन नहीं

MenuForma Print Agent इस ब्रिज को लागू करता है। यह मुफ़्त, ओपन-सोर्स है, और मैक, विंडोज और लिनक्स पर चलता है।

एपीआई संदर्भ

कनेक्शन

const ws = new WebSocket('ws://localhost:8765');

ws.onopen = () => {
  console.log('प्रिंट एजेंट कनेक्टेड');
};

ws.onerror = () => {
  console.log('प्रिंट एजेंट नहीं चल रहा है');
};

एजेंट स्थिति जांचें

यह सत्यापित करने के लिए एक पिंग भेजें कि एजेंट चल रहा है या नहीं:

ws.send(JSON.stringify({ type: 'ping' }));

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  if (data.type === 'pong') {
    console.log('एजेंट संस्करण:', data.version);
  }
};

एक रसीद प्रिंट करें

const receipt = {
  type: 'print',
  printer: 'auto',   // या विशिष्ट आईपी जैसे '192.168.1.100'
  data: {
    storeName: 'मेरा रेस्टोरेंट',
    storeAddress: '123 मेन स्ट्रीट',
    orderNumber: '#1042',
    tableNumber: 'टेबल 5',
    items: [
      { name: 'मार्गेरिटा पिज्जा', qty: 1, price: 14.90 },
      { name: 'स्पार्कलिंग वॉटर', qty: 2, price: 3.50 },
    ],
    subtotal: 21.90,
    tax: 1.97,
    total: 23.87,
    paymentMethod: 'कार्ड',
    footer: 'हमारे साथ भोजन करने के लिए धन्यवाद!',
  }
};

ws.send(JSON.stringify(receipt));

रिएक्ट इंटीग्रेशन उदाहरण

import { useEffect, useRef, useCallback, useState } from 'react';

function usePrintAgent() {
  const wsRef = useRef(null);
  const [connected, setConnected] = useState(false);

  useEffect(() => {
    const connect = () => {
      const ws = new WebSocket('ws://localhost:8765');
      ws.onopen = () => setConnected(true);
      ws.onclose = () => {
        setConnected(false);
        setTimeout(connect, 3000); // पुनः प्रयास करें
      };
      wsRef.current = ws;
    };
    connect();
    return () => wsRef.current?.close();
  }, []);

const print = useCallback((receiptData) => {
    if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
      throw new Error('Print Agent not connected');
    }
    wsRef.current.send(JSON.stringify({ type: 'print', data: receiptData }));
  }, []);

  return { connected, print };
}

Shopify इंटीग्रेशन

Shopify स्टोर के लिए, आप ऑर्डर वेबहुक या ब्राउज़र एक्सटेंशन से प्रिंटिंग ट्रिगर कर सकते हैं:

// In your Shopify storefront or admin extension
async function printShopifyOrder(order) {
  const ws = new WebSocket('ws://localhost:8765');
  
  ws.onopen = () => {
    ws.send(JSON.stringify({
      type: 'print',
      data: {
        storeName: order.shop_name,
        orderNumber: order.name,
        items: order.line_items.map(item => ({
          name: item.title,
          qty: item.quantity,
          price: parseFloat(item.price),
        })),
        total: parseFloat(order.total_price),
        paymentMethod: order.payment_gateway,
      }
    }));
  };
}

प्रिंटर कॉन्फ़िगरेशन

प्रिंट पेलोड में "printer" फ़ील्ड स्वीकार करता है:

मान	विवरण
"auto"	प्रिंट एजेंट सेटिंग्स में कॉन्फ़िगर किए गए प्रिंटर का उपयोग करें
"192.168.1.100"	IP द्वारा सीधे नेटवर्क प्रिंटर से कनेक्ट करें
"USB"	पहले डिटेक्ट किए गए USB प्रिंटर का उपयोग करें

त्रुटि प्रबंधन

ws.onmessage = (event) => {
  const response = JSON.parse(event.data);
  
  if (response.type === 'print_success') {
    console.log('Printed successfully');
  } else if (response.type === 'print_error') {
    console.error('Print failed:', response.error);
    // Show fallback UI or retry
  }
};

पता लगाना कि क्या प्रिंट एजेंट स्थापित है

अपने UI में प्रिंट कार्यक्षमता दिखाने से पहले, जांचें कि क्या एजेंट चल रहा है:

async function isPrintAgentAvailable() {
  return new Promise((resolve) => {
    const ws = new WebSocket('ws://localhost:8765');
    const timeout = setTimeout(() => {
      ws.close();
      resolve(false);
    }, 1000);
    ws.onopen = () => {
      clearTimeout(timeout);
      ws.close();
      resolve(true);
    };
    ws.onerror = () => {
      clearTimeout(timeout);
      resolve(false);
    };
  });
}

// Usage
const agentAvailable = await isPrintAgentAvailable();
if (!agentAvailable) {
  // Show download prompt
  window.open('/print-agent', '_blank');
}

प्रिंट एजेंट डाउनलोड करें

MenuForma Print Agent Mac, Windows और Linux के लिए मुफ़्त और उपलब्ध है। यह USB, नेटवर्क और ब्लूटूथ थर्मल प्रिंटर का समर्थन करता है, और इस गाइड में वर्णित पूर्ण WebSocket API को लागू करता है।

पूर्ण API दस्तावेज़ और ओपन-सोर्स कोड के लिए, Print Agent page पर जाएं।