Example of a Quasar PWA connecting with a Bluetooth thermal printer
- Quasar v1.0
- PWA
- Bluetooth
- Thermal Printer
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.
This model doesn't recognize special characters, so the correspondent ASCII characters will replace them.
You can test the demo at Surge.
Install the dependencies.
npm installRun the app.
quasar dev -m pwaDetect your local IP address.
ipconfigOpen a Chrome tab in your mobile phone and access this link.
https://<YOUR-IP>:8080The main screen is very simple. Only a textarea and a button.
Type a simple message.
The printer must be on and waiting for connection. No previous pairing is needed.
By pressing the "Print" button, a popup listing the available Bluetooth devices will be opened.
Select the "Bluetooth Printer" option and press on "Pair". If it asks for a code, probably it will be 1234.
The result will be this. If it didnt work, probably the printer has connection issues. Restart it and try it again.
Now, let's type a long message to see how the printer will break the lines.
This will be the result.
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."
The characteristics of the data are provided to the device's GATT.
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.
Each part of the message is transferred separately before the connection ends.
