Awesome

@rdlabo/capacitor-brotherprint

Capacitor Brother Print is a native Brother Print SDK implementation for iOS & Android. Support These models.

This plugin is still in the RC (release candidate) phase.

Supported models

Each product link is an Amazon affiliate link. If you choose to make a purchase through these links, it would be greatly appreciated and would help support development costs. Thank you!

Amazon Affiliate Links:　https://amzn.to/3AiiOFT

Supplement

※1 Due to low Bluetooth version, connection is not possible with iOS. Ref: https://okbizcs.okwave.jp/brother/qa/q9932082.html

※2 The iOS/BT implementation for the QL-820NWBc is in place, but it’s uncertain if it functions correctly. It’s unclear whether this is an implementation issue, as Brother’s official app also doesn’t work well.

How to install

% npm install @rdlabo/capacitor-brotherprint

Initialize the Brother SDK

Android configuration

1. Place the following files in the android folder of your Capacitor project:

• android/BrotherPrintLibrary/BrotherPrintLibrary.aar
• android/BrotherPrintLibrary/build.gradle

The BrotherPrintLibrary.aar file is the Brother Print SDK library, which you can download from the Brother website: https://support.brother.co.jp/j/s/es/dev/ja/mobilesdk/android/index.html?c=jp&lang=ja&navi=offall&comple=on&redirect=on#ver4

2. In the android/BrotherPrintLibrary/build.gradle file, include the following content:

configurations.maybeCreate(“default”)
artifacts.add(“default”, file('BrotherPrintLibrary.aar'))

3. Open android/settings.gradle and add the following lines:

include ':BrotherPrintLibrary'
project(':BrotherPrintLibrary').projectDir = new File('./BrotherPrintLibrary/')

These steps will integrate the Brother Print SDK with your Capacitor Android project.

iOS configuration

Update the ios/App/Podfile file at your project. https://github.com/BernardRadman/BRLMPrinterKit 's SDK is version 4.7.2. This is old. So should link to direct own repository.

  target 'App' do
    capacitor_pods
    # Add your Pods here
+   pod 'BRLMPrinterKit_v4', :git => 'https://github.com/rdlabo/BRLMPrinterKit.git', :branch => 'feat/update_4_9_1'
  end

After set, run pod update in the ios directory.

Permission configuration

Android configuration

Update AndroidManifest.xml to include the following permissions:

- <manifest xmlns:android="http://schemas.android.com/apk/res/android">
+ <manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
...
+     <!-- For Bluetooth -->
+     <uses-permission android:name="android.permission.BLUETOOTH" />
+     <uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
+     <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />

+     <!-- For Bluetooth Low Energy, Android 11 and earlier-->
+     <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

+     <!-- For Bluetooth Low Energy, Android 12 and later -->
+     <uses-permission android:name="android.permission.BLUETOOTH_SCAN"
+         android:usesPermissionFlags="neverForLocation"
+         tools:targetApi="s" />

More information is here: https://support.brother.co.jp/j/s/support/html/mobilesdk/guide/getting-started/getting-started-android.html

iOS configuration

Update Info.plist to include the following permissions:

+ <key>NSBluetoothAlwaysUsageDescription</key>
+ <string>【Why use Bluetooth for your app.】</string>
+ <key>NSBluetoothPeripheralUsageDescription</key>
+ <string>【Why use Bluetooth for your app.】</string>
+ <key>NSBonjourServices</key>
+ <array>
+ 	<string>_pdl-datastream._tcp</string>
+ 	<string>_printer._tcp</string>
+ 	<string>_ipp._tcp</string>
+ </array>
+ <key>NSLocalNetworkUsageDescription</key>
+ <string>【Why use WiFi for your app.】</string>
+ <key>UISupportedExternalAccessoryProtocols</key>
+ <string>com.brother.ptcbp</string>

More information is here: https://support.brother.co.jp/j/s/support/html/mobilesdk/guide/getting-started/getting-started-ios.html

How to use

@Component({
  selector: 'brother-print',
  templateUrl: 'brother.component.html',
  styleUrls: ['brother.component.scss'],
})
export class BrotherComponent implements OnInit, OnDestroy {
  readonly #listenerHandlers: PluginListenerHandle[] = [];
  readonly printers = signal<BRLMChannelResult[]>([]);

  async ngOnInit() {
    this.#listenerHandlers.push(
      await BrotherPrint.addListener(BrotherPrintEventsEnum.onPrint, () => {
        console.log('onPrint');
      }),
    );
    this.#listenerHandlers.push(
      await BrotherPrint.addListener(
        BrotherPrintEventsEnum.onPrintError,
        info => {
          console.log('onPrintError');
        },
      ),
    );
    this.#listenerHandlers.push(
      await BrotherPrint.addListener(
        BrotherPrintEventsEnum.onPrintFailedCommunication,
        info => {
          console.log('onPrintFailedCommunication');
        },
      ),
    );
    this.#listenerHandlers.push(
      await BrotherPrint.addListener(
        BrotherPrintEventsEnum.onPrinterAvailable,
        printer => {
          this.printers.update(prev => [...prev, printer]);
        },
      ),
    );
  }

  async ngOnDestroy() {
    this.#listenerHandlers.forEach(handler => handler.remove());
  }

  async searchPrinter(port: BRKMPrinterPort) {
    // This method return void. Get the printer list by listening to the event.
    await BrotherPrint.search({
      port,
      searchDuration: 15, // seconds
    });
  }

  print() {
    if (this.printers().length === 0) {
      console.error('No printer found');
      return;
    }

    const defaultPrintSettings: BRLMPrintOptions = {
      modelName: BRLMPrinterModelName.QL_820NWB,
      labelName: BRLMPrinterLabelName.RollW62,
      encodedImage: 'base64 removed mime-type', // base64
      numberOfCopies: 1, // default 1
      autoCut: true, // default true
    };

    BrotherPrint.printImage({
      ...defaultPrintSettings,
      ...{
        port: this.printers()[0].port,
        channelInfo: this.printers()[0].channelInfo,
      },
    });
  }
}

See demo for complete code: https://github.com/rdlabo-team/capacitor-brotherprint/blob/main/demo/src/app/home/home.page.ts

API

• printImage(...)
• search(...)
• cancelSearchWiFiPrinter()
• cancelSearchBluetoothPrinter()
• addListener(BrotherPrintEventsEnum.onPrinterAvailable, ...)
• addListener(BrotherPrintEventsEnum.onPrint, ...)
• addListener(BrotherPrintEventsEnum.onPrintFailedCommunication, ...)
• addListener(BrotherPrintEventsEnum.onPrintError, ...)
• Interfaces
• Type Aliases
• Enums

printImage(...)

printImage(options: BRLMPrintOptions) => Promise<void>

search(...)

search(option: BRLMSearchOption) => Promise<void>

Search for printers. If not found, it will return an empty array.(not error)

cancelSearchWiFiPrinter()

cancelSearchWiFiPrinter() => Promise<void>

Basically, it times out, so there is no need to use it. Use it when you want to run multiple connectType searches at the same time and time out any of them manually.

cancelSearchBluetoothPrinter()

cancelSearchBluetoothPrinter() => Promise<void>

Basically, it times out, so there is no need to use it. Use it when you want to run multiple connectType searches at the same time and time out any of them manually.

addListener(BrotherPrintEventsEnum.onPrinterAvailable, ...)

addListener(eventName: BrotherPrintEventsEnum.onPrinterAvailable, listenerFunc: (printers: BRLMChannelResult) => void) => Promise<PluginListenerHandle>

Find the printer that can connected to the device.

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>></code>

addListener(BrotherPrintEventsEnum.onPrint, ...)

addListener(eventName: BrotherPrintEventsEnum.onPrint, listenerFunc: () => void) => Promise<PluginListenerHandle>

Success Print Event

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>></code>

addListener(BrotherPrintEventsEnum.onPrintFailedCommunication, ...)

addListener(eventName: BrotherPrintEventsEnum.onPrintFailedCommunication, listenerFunc: (info: ErrorInfo) => void) => Promise<PluginListenerHandle>

Failed to connect to the printer. ex: Bluetooth is off, Printer is off, etc.

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>></code>

addListener(BrotherPrintEventsEnum.onPrintError, ...)

addListener(eventName: BrotherPrintEventsEnum.onPrintError, listenerFunc: (info: ErrorInfo) => void) => Promise<PluginListenerHandle>

Failed to print.

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>></code>

Interfaces

PluginListenerHandle

Type Aliases

BRLMPrintOptions

<code>{ encodedImage: string; /** _ Should use enum <a href="#brlmprintermodelname">BRLMPrinterModelName</a> _/ modelName: <a href="#brlmprintermodelname">BRLMPrinterModelName</a>; } & <a href="#partial">Partial</a><<a href="#brlmchannelresult">BRLMChannelResult</a>> & (<a href="#brlmprinterqlmodelsettings">BRLMPrinterQLModelSettings</a> | <a href="#brlmprintertdmodelsettings">BRLMPrinterTDModelSettings</a>)</code>

Partial

Make all properties in T optional

<code>{ [P in keyof T]?: T[P]; }</code>

BRLMChannelResult

<code>{ port: <a href="#brlmprinterport">BRLMPrinterPort</a>; modelName: string; serialNumber: string; macAddress: string; nodeName: string; location: string; /** _ This need to connect to the printer. _ wifi: IP Address _ bluetooth: macAddress _ bluetoothLowEnergy: modelName for bluetoothLowEnergy */ channelInfo: string; }</code>

BRLMPrinterQLModelSettings

<code>{ /** _ Should use enum <a href="#brlmprinterlabelname">BRLMPrinterLabelName</a> _/ labelName: <a href="#brlmprinterlabelname">BRLMPrinterLabelName</a>; } & <a href="#brlmprintersettings">BRLMPrinterSettings</a></code>

BRLMPrinterSettings

These are optional. If these are not set, default values are assigned by the printer.

<code>{ /** _ The number of copies you print. _/ numberOfCopies?: <a href="#brlmprinternumberofcopies">BRLMPrinterNumberOfCopies</a>; /** _ Whether the auto-cut is enabled or not. If true, your printer cut the paper each page. _/ autoCut?: <a href="#brlmprinterautocuttype">BRLMPrinterAutoCutType</a>; /** _ A scale mode that specifies how your data is scaled in a print area of your printer. _/ scaleMode?: <a href="#brlmprinterscalemode">BRLMPrinterScaleMode</a>; /** _ A scale value. This is effective when ScaleMode is ScaleValue. _/ scaleValue?: <a href="#brlmprinterscalevaluetype">BRLMPrinterScaleValueType</a>; /** _ A way to rasterize your data. _/ halftone?: <a href="#brlmprinterhalftone">BRLMPrinterHalftone</a>; /** _ A threshold value. This is effective when the Halftone is Threshold. _/ halftoneThreshold?: <a href="#brlmprinterhalftonethresholdtype">BRLMPrinterHalftoneThresholdType</a>; /** _ An image rotation that specifies the angle in which your data is placed in the print area. Rotation direction is clockwise. _/ imageRotation?: <a href="#brlmprinterimagerotation">BRLMPrinterImageRotation</a>; /** _ A vertical alignment that specifies how your data is placed in the printable area. _/ verticalAlignment?: <a href="#brlmprinterverticalalignment">BRLMPrinterVerticalAlignment</a>; /** _ A horizontal alignment that specifies how your data is placed in the printable area. _/ horizontalAlignment?: <a href="#brlmprinterhorizontalalignment">BRLMPrinterHorizontalAlignment</a>; /** _ A compress mode that specifies how to compress your data. _ note: This is ios only. _/ compressMode?: <a href="#brlmprintercompressmode">BRLMPrinterCompressMode</a>; /** _ A priority that is print speed or print quality. Whether or not this has an effect is depend on your printer. */ printQuality?: <a href="#brlmprinterprintquality">BRLMPrinterPrintQuality</a>; }</code>

BRLMPrinterNumberOfCopies

<code>number</code>

BRLMPrinterAutoCutType

<code>boolean</code>

BRLMPrinterScaleValueType

<code>number</code>

BRLMPrinterHalftoneThresholdType

<code>number</code>

BRLMPrinterTDModelSettings

<code>{ /** _ Should use enum BRKMPrinterCustomPaperType _/ paperType: <a href="#brlmprintercustompapertype">BRLMPrinterCustomPaperType</a>; /** _ The width of the label. For example, the RD-U04J1 is 60.0 wide. _/ tapeWidth: number; /** _ The length of the label. For example, the RD-U04J1 is 60.0 wide. _/ tapeLength: number; /** _ It is the difference between a sticker and a mount. _ For example, the RD-U04J1 is 1.0, 2.0, 1.0, 2.0 _/ marginTop: number; marginRight: number; marginBottom: number; marginLeft: number; /** _ The spacing between seals. For example, the RD-U04J1 is 0.2. _/ gapLength: number; paperMarkPosition: number; paperMarkLength: number; /** _ Should use enum BRKMPrinterCustomPaperUnit. _ For example, the RD-U04J1 is mm. _/ paperUnit: <a href="#brlmprintercustompaperunit">BRLMPrinterCustomPaperUnit</a>; }</code>

BRLMSearchOption

<code>{ /** _ 'usb' is android only, and now developing. _/ port: <a href="#brlmprinterport">BRLMPrinterPort</a>; /** _ searchDuration is the time to end search for devices. _ default is 15 seconds. _ use only port is 'wifi' or 'bluetoothLowEnergy'. _/ searchDuration: number; }</code>

ErrorInfo

<code>{ message: string; code: number; }</code>

Enums

BRLMPrinterModelName

BRLMPrinterPort

BRLMPrinterLabelName

BRLMPrinterScaleMode

BRLMPrinterHalftone

BRLMPrinterImageRotation

BRLMPrinterVerticalAlignment

BRLMPrinterHorizontalAlignment

BRLMPrinterCompressMode

BRLMPrinterPrintQuality

BRLMPrinterCustomPaperType

BRLMPrinterCustomPaperUnit

BrotherPrintEventsEnum