I ❤️ .NET

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

1. Introduction
2. Printing Barcode
3. Summary

Introduction

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 manufacturing, retail, 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 problem but I'm always a fan of HTML and CSS. So, I decided to do it from blazor wasm app. Lets see how we can achieve this.

Printing Barcode

I assume you have good HTML5, CSS3 and JavaScript knowledge. If not, I recommend you to learn them first. I'm not going to explain the basics of HTML, CSS and JavaScript in this article. I will be using HTML5, CSS3 and JavaScript to achieve this. I will be using 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 Page Setup tab in 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.

Now under 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 50mm width. 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.

In the above code,

1. We are getting number of label count as input from user.
2. Once the user inputs the Count, the bind action will calculate number of rows it needs to print and store it in _rows.
3. We are using Math.DivRem to find the quotient and remainder and add remainder to rows count.
4. Now immediately the UI will be rendered with two barcodes in each row based on row count.
5. Thats it we are ready with our HTML setup.
6. Here I have hidden the #barcode-section-to-print purposefully to avoid all the plumbing works not visible to user for better user experience.

In the above @print @media css code,

1. We are adjusting the position of document to be printed.
2. Then we are setting the max-width of html and body to 100mm (it's because we will have two labels in on row 50mm + 50mm) and max-height to 35mm.
3. Now we are using CSS3 GRID to layout our barcodes inside article tag in two columns per row.
4. Each barcode inside section tag will be using CSS3 Flex to layout its content.
5. Keep an eye on page-break-after: always; inside article tag. This css is responsible for making each row as separate page in browser.
6. 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.

Now we are done with skeleton (HTML5) and makeup (CSS3). We still need some JavaScript to make it work. Let's see what we have done in the above code.

1. Import the bwip.min.js file using dynamic import.
2. Define a function printBarcode() that will be called to print the barcode from our PrintBarcodeDemo component.
3. Create an iframe element or select an existing one with the ID barcode-print.
4. Set the ID of the iframe to barcode-print. This is to make sure if the element is already present that can be reused.
5. Append the iframe to the document body.
6. Set the HTML content of 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.
7. Create a script element to define a function that sets print styles. Note that we are setting @print @page size to 100mm 35mm.
8. Append the print script to the iframe's head.
9. Create a script element to define a function that draws barcodes.
10. Append the barcode script to the iframe's head.
11. Create a script element to fetch CSS and JavaScript files, and call function to draw the barcode for each canvas element and call window.print() inside iframe.
12. Append the body script to the iframe's body.

That's it above setup will nicely generate barcode and layout it in two columns per row and print it to the label printer.

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 @page-break-after: always; 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 Page Setup under Printer Preferences and click on Print. That's it you will see the barcode printed in your label printer.

Note that browser print window itself show the barcodes in 2 pages in below image which will print in two rows in label sheet.

Summary

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.