In this article, let's learn about printing
Barcode to a label printer in Blazor WASM apps.
Note: If you have not done so already, I recommend you read the article on How to generate barcode in Blazor WASM.
Table of Contents
In my previous post I wrote about generating barcode in Blazor WASM apps. As a bonus I got an
another opportunity to print barcode to
a label printer from blazor wasm apps. This is a very common scenario in many industries like
logistics, etc. where they need to print barcode. However it took a day for me to figure out how to achieve this via blazor wasm and
print to label printer using browser. So, I thought of writing this to help others to solve similar problem.
There are many windows applications available in market to print barcode to label printer. There are even licensed reporting apps which can solve this
I'm always a fan of HTML and CSS. So, I decided to do it from blazor wasm app. Lets see how we can
I assume you have
Blazor WASM to build the UI.
As a pre-requisite, we need label printer to be installed in our system. I'm using
TVS LP 46 NEO label printer.
This is a plug and play printer and it comes with a
windows driver. So, we need to install the driver in our system.
Once the driver is installed, we can see the printer getting detected in our system.
Select your printer from installed pinters and go to
print preferences. Under
Stock section edit the default
USER profile to change the label size.
Next we need to
configure printer with our label size. This is an important step. If we don't configure the printer
with our label size, then the printer will not print correctly. This step took me good amount of time to figure out.
The trick here is
to set the width to two label size 100mm (50mm + 50mm). Remember two labels per row. Let me make it easier for you folks.
Graphics tab in
Dithering section select
None to have barcode printed as solid barcode without any dots.
I need to print the barcode to the label of size
35mm height and
The label sheet will have
two labels in one row. We need to convert
each row to page
using css and make browser understand one row as one page. Once we do this when we print from browser, the browser will send print for each page and that
will be printed in one row from our label printer.
Here is how the actual label roll sheet looks like.
Code Sample - Blazor WASM Barcode Print Component
In the above code,
- We are getting number of label count as input from user.
Once the user inputs the
Count, the bind action will calculate number of rows it needs to print and store it in
We are using
Math.DivRemto find the
remainderand add remainder to rows count.
- Now immediately the UI will be rendered with
two barcodes in each rowbased on row count.
- Thats it we are ready with our HTML setup.
Here I have hidden the
#barcode-section-to-printpurposefully to avoid all the plumbing works not visible to user for
better user experience.
Code Sample - Blazor WASM Barcode Print Component CSS
In the above
@print @media css code,
- We are adjusting the
positionof document to be printed.
Then we are setting the
100mm (it's because we will have two labels in on row 50mm + 50mm)and
Now we are using
CSS3 GRIDto layout our barcodes inside
articletag in two columns per row.
Each barcode inside
sectiontag will be using
CSS3 Flexto layout its content.
Keep an eye on
articletag. This css is
responsible for making each row as separate page in browser.
- You can add rest of the css to adjust font, padding, margin and spacing to make sure barcode is on correct position in physical print output.
Code Sample - Blazor WASM Barcode Print Component JS
Now we are done with
skeleton (HTML5) and
makeup (CSS3). We still need some
- Import the
bwip.min.jsfile using dynamic import.
Define a function
printBarcode()that will be called to
print the barcode from our PrintBarcodeDemo component.
iframeelement or select an existing one with the ID
Set the ID of the iframe to
barcode-print. This is to make sure if the element is already present that can be reused.
- Append the
HTML contentof the iframe's body to the HTML content of the element with the ID
barcode-section-to-print. This will bring our
barcode HTML to the iframe body.
scriptelement to define a function that sets print styles. Note that we are setting
@print @page size to 100mm 35mm.
- Append the
print scriptto the
- Create a
scriptelement to define a
function that draws barcodes.
- Append the
barcode scriptto the
function to draw the barcode for each canvas elementand
- Append the
body scriptto the
That's it above setup will nicely generate barcode and layout it in two columns per row and print it to the label printer.
Demo - Printing Barcode to label printer from Blazor WASM
Scenario - Let's try printing barcode using our
PrintingBarcodeDemo component. Try inputting different
values and click on Print button.
In a nutshell, the
trick here is to use
CSS3 GRID and
CSS3 FLEX to layout the barcodes in
two columns per row and use
CSS3 @media print to set the page size and use
to make each row as separate page. Once we do this, the browser will send print for each page and that will be printed in one row from our label printer.
Finally select your
barcode printer from browser and
uncheck default header and footer
from browser print window and also
set margins to none in browser print window and most importantly select
Paper Size as
USER profile which we edited in
Printer Preferences and click on
Note that browser print window itself show the barcodes in 2 pages in below image which will print in two rows in label sheet.
In this article we learnt how to
print barcode to label printer from blazor wasm application. We learnt how to
configure printer page based on our label size and we used the power of HTML5 and CSS3 to print barcode to labels from browser without any third
party apps. Hope you enjoyed reading this article and it saved a lot of time for you.