Text2 Barcode – Web Print API (Docs & Samples)

Introduction

Imprime desde la web a impresoras térmicas usando t2bprinter.js.

La API de Text2 Barcode permite listar impresoras, detectar la predeterminada, filtrar por nombre y enviar comandos de impresión (ZPL, ESC/POS, TSPL). También puede convertir imágenes/PDF a formatos de impresión.

Idea clave: Tu web/app carga la librería t2bprinter.js en el navegador. Esta se encarga de encontrar y enviar datos a la impresora (USB/Bluetooth/Driver/Red) a través del conector compatible.

Prerequisites

Una impresora soportada (p. ej., Zebra GK420d/GK420t, Bixolon SRP-330II, etc.).
Acceso a la librería: https://labeldictate.com/text2barcode/lib/t2bprinter.js.
Tener instalado Text2 Barcode.

Quick Start

Incluye la librería y llama a los métodos:

<script src="https://labeldictate.com/text2barcode/lib/t2bprinter.js"></script>

Probar rápido: Abre API Test para verificar que tu navegador detecta impresoras: labeldictate.com/text2barcode/test

Tipos de datos

La mayoría de los métodos de T2bPrinter devuelven objetos de tipo Printer.

type Printer = {
  "uid": string;
  "name": string;
  "manufacturer": string;
  "connection": "driver" | "bluetooth" | "network" | "ttb";
  "deviceType": string;
  "version": number;
};

Descripción de campos

uid: Identificador único del dispositivo.
Ej: nombre de la impresora, dirección IP, dirección MAC de Bluetooth o ID de plantilla de Text2Barcode.
name: Nombre asignado a la impresora.
manufacturer: Nombre del fabricante del dispositivo.
connection: Tipo de conexión. Valores posibles:
- driver: Controlador específico (Windows/macOS).
- bluetooth: Conexión Bluetooth (Android/iOS).
- network: Conexión de red (IP/host).
- ttb: Conexión a través de Text2Barcode.
Sistemas operativos:
Android/iOS: bluetooth, network, ttb.
Windows/macOS: driver, network, ttb.
deviceType: Categoría del dispositivo (normalmente printer).
version: Versión de la API en uso.

Core API

available()Printers

Lista todas las impresoras disponibles en el dispositivo.

const available = await T2bPrinter.available();
for (const printer of (available.printer || [])) {
  console.debug("printer", JSON.stringify(printer, null, 2));
}

{
  "printer":[
    {
      "uid":"ZDesigner GK420t Plus (ZPL)",
      "name":"ZDesigner GK420t Plus (ZPL)",
      "manufacturer":"Zebra Technologies",
      "connection":"driver",
      "deviceType":"printer",
      "version":4
    },
    { ... }
  ]
}

default()Printer

Obtiene la impresora predeterminada del dispositivo.

const printer = await T2bPrinter.default();
console.debug("defaultPrinter:", JSON.stringify(printer, null, 2));

{
  "uid":"ZDesigner GK420t Plus (ZPL)",
  "name":"ZDesigner GK420t Plus (ZPL)",
  "manufacturer":"Zebra Technologies",
  "connection":"driver",
  "deviceType":"printer",
  "version":4
}

filter(predicate)Printer[]

Devuelve impresoras que cumplen un criterio.

const printers = await T2bPrinter.filter(it => it.name.includes("ZPL"));
console.debug("printers:", JSON.stringify(printers, null, 2));

[
  {
    "uid":"ZDesigner GK420t Plus (ZPL)",
    "name":"ZDesigner GK420t Plus (ZPL)",
    "manufacturer":"Zebra Technologies",
    "connection":"driver",
    "deviceType":"printer",
    "version":4
  },
  { ... }
]

find(predicate)Printer

Devuelve la primera impresora que cumple un criterio.

const printer = await T2bPrinter.find(it => it.name === "Zebra GK420d");
// o por uid: await T2bPrinter.find(it => it.uid === "ZDesigner GK420t Plus (ZPL)");
console.debug("printer:", JSON.stringify(printer, null, 2));

{
  "uid":"ZDesigner GK420t Plus (ZPL)",
  "name":"ZDesigner GK420t Plus (ZPL)",
  "manufacturer":"Zebra Technologies",
  "connection":"driver",
  "deviceType":"printer",
  "version":4
}

write(printer, data)Print

Envía datos (ZPL, ESC/POS, TSPL) a una impresora.

const result = await T2bPrinter.write(printer, `
^XA
^PW609
^LL403
^PON
^CI28

^FO38,30^GB545,349,5^FS

^FO85,60^A0N,33,33^FH^FDZPL PRINT TEST - 3"^FS

^FO170,100^A0N,33,33^FH^FD$ Dollar - € Euro^FS
^FO170,130^A0N,33,33^FH^FDL Lambda - ¥ Yen^FS
^FO150,180^A0N,33,33^FH^FDSpecial characters:^FS
^FO150,210^A0N,33,33^FH^FDñ á é í ó ú characters^FS

^BY2,2,44^FO90,280^BCN,,Y,N
^FD123456789012^FS

^FO465,20^BQN,2,4
^FH\\^FDLA,123456789012^FS

^PQ1,0,1,Y
^XZ
`);
console.debug("write", JSON.stringify(result, null, 2));

{
  "result": true,
  "message": "messages"
}

writeAsBlob(printer, blob)Print

Envía datos binarios a la impresora.

const zpl = '^XA^FO50,50^A0N,50,50^FDHello^FS^XZ';
const blob = new Blob([zpl], { type: "application/octet-stream" });
const result = await T2bPrinter.writeAsBlob(printer, blob);
console.debug("writeAsBlob", JSON.stringify(result, null, 2));

{
  "result": true,
  "message": "messages"
}

convert(resource, payload)Convert/Print

Convierte una imagen o PDF a ZPL/ESC-POS/TSPL y, opcionalmente, imprime.

const fileInput = document.querySelector('#file');
const resource = fileInput.files[0]; // Blob

const payload = {
  options: {
    action: "print",     // "print" | "return" | "store"
    fromFormat: "png",   // "png" | "jpg" | "pdf"
    toFormat: "zpl",     // "zpl" | "esc-pos" | "tspl"
    resize: { width: 600 },
    dithering: "FloydSteinbergDithering"
  },
  device: {
    uid: "ZDesigner GK420t Plus (ZPL)",
    name: "ZDesigner GK420t Plus (ZPL)",
    manufacturer: "Zebra Technologies",
    connection: "driver",
    deviceType: "printer",
    version: 4
  }
};

const result = await T2bPrinter.convert(resource, payload);
console.debug("converted", JSON.stringify(result, null, 2));

{
  "data": "base64-encoded ZPL or format",
  "width": 600,
  "height": 400,
  "filename": "converted.zpl"
}

Recipes (Samples)

Imprimir muestra ZPL

Ejemplo mínimo para imprimir una etiqueta ZPL buscando por name:


<!DOCTYPE html>
<html>
  <head>
    <script src="https://labeldictate.com/text2barcode/lib/t2bprinter.js"></script>
    <script>
      const printLabel = async () => {
        const printerName = "Zebra GK420d";
        const labelContent = `
^XA
^PW609
^LL403
^PON
^CI28
^FO85,60^A0N,33,33^FH^FDZPL PRINT TEST - 3"^FS
^BY2,2,44^FO90,280^BCN,,Y,N
^FD123456789012^FS
^FO465,20^BQN,2,4
^FH\\^FDLA,123456789012^FS
^PQ1,0,1,Y
^XZ
`;
        try {
          const printer = await T2bPrinter.find(it => it.name === printerName);
          if (printer) {
            const res = await T2bPrinter.write(printer, labelContent);
            alert(JSON.stringify(res, null, 2));
          } else {
            alert(\`Printer "${printerName}" not found.\`);
          }
        } catch (err) {
          alert(err);
        }
      };
      window.onload = printLabel;
    </script>
  </head>
  <body></body>
</html>

Imprimir muestra ESC/POS

Ejemplo mínimo para imprimir en ESC/POS:


<!DOCTYPE html>
<html>
  <head>
    <script src="https://labeldictate.com/text2barcode/lib/t2bprinter.js"></script>
    <script>
      const printLabel = async () => {
        const printerName = "Bixolon SRP-330II";
        const labelContent = `
<EscPos>
  <Init/>
  <QrCode justification="right">QR Test Text</QrCode>
  <Feed lines="1"/>
  <BarCode>1234567890</BarCode>
  <Feed lines="1"/>
  <Text fontWidth="3" fontHeight="3">Large Text</Text>
  <Text fontWidth="2" fontHeight="2">Medium Text</Text>
  <Text fontWidth="1" fontHeight="1">Small Text</Text>
  <Feed lines="1"/>
  <Text justification="left">Left</Text>
  <Text justification="center">Center</Text>
  <Text justification="right">Right</Text>
  <Feed lines="1"/>
  <Text underline="one-dot-thick">Underline</Text>
  <Text bold="true">Bold</Text>
  <Text inverse="true">Inverted</Text>
  <Feed lines="3" />
  <Cut mode="full" />
</EscPos>
`;
        try {
          const printer = await T2bPrinter.find(it => it.name === printerName);
          if (printer) {
            const res = await T2bPrinter.write(printer, labelContent);
            alert(JSON.stringify(res, null, 2));
          } else {
            alert(\`Printer "${printerName}" not found.\`);
          }
        } catch (err) {
          alert(err);
        }
      };
      window.onload = printLabel;
    </script>
  </head>
  <body></body>
</html>

Solución de problemas

No aparecen impresoras: Revisa permisos del navegador/OS, usa HTTPS, valida el conector y prueba en API Test.
Nombre no coincide: Usa available() para listar y copia el name real o filtra por uid.
Caracteres especiales: Asegura ^CI28 en ZPL o las banderas correctas en ESC/POS para charset/UTF-8.
Rendimiento/colas: Evita mandar múltiples trabajos simultáneos; espera la promesa de write.

API Test