capacitor-zebra-printer

Capacitor plugin to send ZPL messages directly to Zebra printers via TCP/IP. It is a combination of ionic-zebra-printer android implementation and ionic-zebra-label-printer iOS implementation.

Fork changes:

• Add fetch timeout
• Fix android connection problems
• Add iOS implementation

Install

yarn add capacitor-zebra-printer

or

npm install capacitor-zebra-printer

and finally

npx cap sync

How to use

import { CapacitorZebraPrinter } from "capacitor-zebra-printer";

const printUtils = {
  printZpl: async ({
    zpl,
    ip,
    port,
  }: {
    zpl: string;
    ip: string;
    port: number;
  }) => {
    return await CapacitorZebraPrinter.print({
      ip,
      port,
      zpl,
    }).then((res) => {
      return res && res.value == "success";
    });
  },
};

export default printUtils;

ZPL builder (fluent API)

import { CapacitorZebraPrinter, createZplBuilder } from 'capacitor-zebra-printer-juanrdlo';

const zpl = createZplBuilder()
  .align('center')
  .image('https://raw.githubusercontent.com/Malik12tree/capacitor-thermal-printer/main/assets/Logo-Black.png')
  .bold()
  .underline()
  .text('The amazing store')
  .normal()
  .text('Order: 42471382')
  .cutPaper()
  .build();

await CapacitorZebraPrinter.print({
  ip: '192.168.1.120',
  port: 9100,
  zpl,
});

Notes:

• image('https://...') generates a QR with that URL content (Zebra cannot print remote bitmap URLs directly).
• image('R:LOGO.GRF') prints a stored image from printer memory.
• image('^FO...^GFA...^FS') lets you inject raw image commands.

ESC/POS builder (AON PR-255 and similar)

import { CapacitorZebraPrinter, createEscPosBuilder } from 'capacitor-zebra-printer-juanrdlo';

const payload = createEscPosBuilder()
  .align('center')
  .bold()
  .text('Restaurante Bueno Le Digo')
  .normal()
  .text('Orden: 42471382')
  .feed(1)
  .cutPaper()
  .build();

await CapacitorZebraPrinter.print({
  ip: '192.168.1.120',
  port: 9100,
  zpl: payload,
});

Note: the field is still called zpl for backward compatibility, but it can carry raw ESC/POS payload too.

ESC/POS logo image (AON PR-255)

For logos, prefer payloadBase64 to preserve binary bytes correctly across native bridges:

import {
  CapacitorZebraPrinter,
  createEscPosBuilder,
  rasterImageFromUrl,
} from 'capacitor-zebra-printer-juanrdlo';

const logo = await rasterImageFromUrl('https://example.com/logo.png', {
  maxWidth: 256,
  threshold: 150,
});

const payloadBase64 = createEscPosBuilder()
  .align('center')
  .image(logo)
  .textSize('large')
  .text('Restaurante Bueno Le Digo')
  .textSize('normal')
  .text('Orden: 42471382')
  .cutPaper()
  .buildBase64();

await CapacitorZebraPrinter.print({
  ip: '192.168.1.120',
  port: 9100,
  payloadBase64,
});

Web browser printing (requires relay)

Browsers cannot open raw TCP sockets to :9100, so direct web-to-printer printing will usually send HTTP headers to the printer and fail. For web, use a small relay server on the same network as the printer.

Run the included relay:

node relay/server.js

Then print from the browser with relayUrl:

import { CapacitorZebraPrinter, createEscPosBuilder } from 'capacitor-zebra-printer-juanrdlo';

const payload = createEscPosBuilder()
  .align('center')
  .text('Restaurante Bueno Le Digo')
  .text('Orden: 42471382')
  .cutPaper()
  .build();

const res = await CapacitorZebraPrinter.print({
  relayUrl: 'http://192.168.1.50:3030',
  ip: '192.168.1.120',
  port: 9100,
  zpl: payload,
});

console.log(res.success); // true when the relay sent the job successfully

You can also validate the printer through the relay:

const check = await CapacitorZebraPrinter.checkConnection({
  relayUrl: 'http://192.168.1.50:3030',
  ip: '192.168.1.120',
  port: 9100,
});

console.log(check.success);

iOS notes (local network)

For iOS 14+, your host app should include local network usage text in Info.plist:

<key>NSLocalNetworkUsageDescription</key>
<string>This app connects to Zebra printers on your local network.</string>

Without this, iOS can block TCP access to printers on LAN even when the plugin code is correct.

API

• echo(...)
• checkConnection(...)
• print(...)
• Interfaces
• Type Aliases

echo(...)

echo(options: { value: string; }) => Promise<{ value: string; }>

| Param | Type | | ------------- | ------------------------------- | | options | { value: string; } |

Returns: Promise<{ value: string; }>

checkConnection(...)

checkConnection(options: { ip: string; port: number; relayUrl?: string; }) => Promise<PluginResult>

| Param | Type | | ------------- | ------------------------------------------------------------- | | options | { ip: string; port: number; relayUrl?: string; } |

Returns: Promise<PluginResult>

print(...)

print(options: PrintOptions) => Promise<PluginResult>

| Param | Type | | ------------- | ----------------------------------------------------- | | options | PrintOptions |

Returns: Promise<PluginResult>

Interfaces

PluginResult

A resulting call back from the native layer.

| Prop | Type | | ---------------- | --------------------------------------------------------------- | | callbackId | string | | methodName | string | | data | PluginResultData | | success | boolean | | error | PluginResultError | | pluginId | string | | save | boolean |

PluginResultData

PluginResultError

| Prop | Type | | ------------- | ------------------- | | message | string |

Type Aliases

PluginResult

{ success: boolean; value: string; error?: string; message?: string; elapsedMs?: number; }

PrintOptions

{ ip: string; port: number; zpl?: string; payloadBase64?: string; relayUrl?: string; }