Description
Simple extension that is able to generate a receipt format, preview it in a Webviewer, convert it into a base64 image so it can be printed in ESC/POS thermal printers.
As some users who have worked with thermal printers will know, working with them can be a headache, considering that each thermal printer is different and has limitations in terms of characters, fonts, styles and designing a receipt can be a complicated task. Definitely the best way to send to print with this kind of printers is using raw bytes with commands that the printer can interpret, as it is done with my extension:
But at the request of some users I have created this tool that will help them to perform the printing of a better designed format and with greater ease, but it is very important to keep in mind some considerations. (READ THE INSTRUCTIONS AT THE END)
Pictures and description of all the blocks
Summary
Receipt builder Methods:
SetPaperWidth
Defines the paper width in mm
Parameter Type size number Space
Creates a space with a specific height in pixels.
Parameter Type size text Return Type: text
Text
Creates a text with a specific alignment. Possible values for alignment: left, center, right.
Parameter Type text text alignment text Return Type: text
Image
Creates an image with a specific alignment. Image is a String containing a base64 image or an URL. Width and height are numbers to define the width and height in pixels. Alignment can be left, center, or right.
Parameter Type image text width number height number alignment text Return Type: text
Line
Creates an horizontal lineReturn Type: text
Table
>
Creates a table. Headers is a list with the column names, alignments is a list to specify text alignment for each column, overflowWrap is a list to specify how the text should wrap in each column(normal,anywhere,break-word), data is a list that contains the table rows, and headerBackground is a boolean to specify if the column headers should have a gray background.
Parameter Type headers list alignments list overflowWrap list data list headerBackground boolean Return Type: text
BuildReceipt
Renders the receipt in a given webview. Items is a list of the elements of the receipt, scale is a number to specify the quality scale of the image (0.5-3 is recommendend), includeBase64Prefix is a boolean to specify if the base64 prefix should be included in the result and aditionalCSS is a string to specify additional CSS to be included in the HTML Receipt.
Parameter Type webViewer component items list scale text includeBase64Prefix boolean aditionalCSS text BuildReceiptHTML
Returns the HTML of the receipt. Items is a list of the elements of the receipt, scale is a number to specify the quality scale of the image (0.5-3 is recommendend), includeBase64Prefix is a boolean to specify if the base64 prefix should be included in the result and aditionalCSS is a string to specify additional CSS to be included in the HTML Receipt.
Parameter Type items list scale text includeBase64Prefix boolean aditionalCSS text Return Type: text
EscPos Commands Methods:
ConvertImage
Converts a large image to a list of commands to print it. String is a valid base64image with no prefix, dotsPerLine is the number of dots per line typically 384, threshold is a number from 0 to 255 (128 recommended), useDithering(true/false).
Parameter Type base64Img text dotsPerLine number threshold number useDithering boolean Return Type: list
CutPaper
This block returns the command to cut the printers paper. fullCut (true/falase). If true the printer will fully cut the paper, if false it will be only a partial cut.
Parameter Type fullCut boolean Return Type: list
CutPaperAlt
This block returns the command to cut the printers paper. Alt is a number (1 or 2) to return different variants of this command.
Parameter Type alt number Return Type: list
HWInit
This block will initialize or restore the default settings of your printer
Return Type: list
Feed
This block will return the command to feed the printers paper. Lines is a number of the amount of lines to be fed
Parameter Type lines number Return Type: list
This documentation was generated using Akshat Developer's Documentation Generator.
Instructions to use the extension and considerations
To generate a printable receipt you can use the BuildReceipt block. Youll need a WebView to preview the receipt output and the content you want to print. Here's an example of the block usage.
With this block the receipt will be automatically showed in the web view
One of the block parameters is a WebView, so you'll need an event for it, especifically String Change. This event will be triggered when the receipt is rendered on the webview
The value returned with this event is a base64 image of the receipt. I recommend you to store that into a variable so you can use it as you want. You could store it in your device using a Base64 to image extension, or obviously do the printing.
For the printing part this extension can convert the escpos commands of that receipt.
Have in mind that this extension as well as my other thermal printing extension doesn't manage the connection with the printer. For the connection you could use the BluetoothClient component, my SimpleSocket extension, (included in this extension) or soon my SimpleUSBConnector. In order to help visualize an example i'll use the Bluetooth component:
Heres an example video:
In the video the printing was intended to be to a 57 mm width printer but mine is 80mm. But changing the width parameter you get this result:
CONSIDERATIONS (MUST READ)
Reasons to use this extension:
- Print receipts with better design
- Override character and font restrictions of some printers
Reasons not to use this extension:
- The receipts that are generated are images and thermal printers also have restrictions for printing images, for example these should not be larger than 256pixels in height. So in this extension, the conversion to esc/pos commands is done by separating the image into subimages smaller than 256 pixels and printing them one by one. This means that depending on the parameters (width and threshold) used in the printing you may see small jumps in the printing of the image.
ps: sorry for the red line on the paper, i ran out of it testing this during development 
- The quality of the printed text is not as good as when using an esc/pos text command.
Basically i don't like this method of printing but some users may find it comfortable. In my tests i found out that this method works better with 57mm receipts as the jumps are not noticable, with 80mm they'are always there but with different threshold values you can reduce it a lot.
DISCLAIMER:
Purchase this extension only if you are sure of the possible issues that you may encounter. This extension is provided "AS IS," without any warranties of any kind, express or implied. All sales are final. No refunds will be provided under any circumstances.
This extension may receive updates for bug fixing and new features, you'll receive this new updates with no extra charge on the email you provide when buying the extension.
Resources and references used for this development:
-
https://codepen.io/klymates/pen/vajXgL for reference in styling
-
Html2canvasLibrary
-
Fast by JEWEL 🏃♂️ Fast : An Efficient Way to Build Extensions
Purchase the extension
This extension is $8.00 USD and can be bought on here:
You'll get the following files:
- Example aia
- Extension aix
Let me know if i can help you before or after purchasing this extension.