Home

Awesome

titulo

Quasar PWA Bluetooth Printer (quasar-pwa-bluetooth-printer)

Example of a Quasar PWA connecting with a Bluetooth thermal printer

Technologies

Objective

In this project, you will learn how to connect a Quasar PWA with a thermal printer by Bluetooth to print messages. The device we have used for this test is available here.

printer01

This model doesn't recognize special characters, so the correspondent ASCII characters will replace them.

You can test the demo at Surge.

How to run this project

Install the dependencies.

npm install

Run the app.

quasar dev -m pwa

Detect your local IP address.

ipconfig

Open a Chrome tab in your mobile phone and access this link.

https://<YOUR-IP>:8080

The main screen is very simple. Only a textarea and a button.

quasar01

Type a simple message.

quasar02

The printer must be on and waiting for connection. No previous pairing is needed.

printer02

By pressing the "Print" button, a popup listing the available Bluetooth devices will be opened.

quasar03

Select the "Bluetooth Printer" option and press on "Pair". If it asks for a code, probably it will be 1234.

quasar04

The result will be this. If it didnt work, probably the printer has connection issues. Restart it and try it again.

printer03

Now, let's type a long message to see how the printer will break the lines.

quasar05

This will be the result.

printer04

Behind the code

There are some parts of the code that need some attention.

The "/src/pages/Index.vue" file contains the "navigator.bluetooth" which is the object responsible for the Bluetooth connection. Accordingly to the docs:

The Bluetooth.requestDevice() method of the Bluetooth interface returns a Promise to a BluetoothDevice object with the specified options. If there is no chooser UI, this method returns the first device matching the criteria."

code01

The characteristics of the data are provided to the device's GATT.

code02

If the message is sent by a mobile device such as an Android phone, the amount of data to be transfered at once is limited.

code03

Each part of the message is transferred separately before the connection ends.

code04