I ❤️ .NET

In this article, let's learn about generating Barcode in Blazor WASM apps.

Note: If you have not done so already, I recommend you read the article on Blazor WASM Publishing to AWS Amplify.

Table of Contents

1. Introduction
2. Generating Barcode
3. Summary

Introduction

A week ago I got an requirement to generate barcodes in a Blazor WASM application. Upon searching the internet I was able to find some from,

• Syncfusion Barcode Component
• ConnectCode Barcode Resources

and ofcourse we can use them but we either need to get a licence or pay for it or the setup seemed complex. So, I thought of creating a simple barcode generator using HTML5 Canvas and C# using bwip-js.

Generating Barcode

Create a new component called BwipJsBarcode.razor and add the following code to it.

In the above code we are just creating a Canvas element and assigning it an id of bwipcanvas. And we are loading the our js helper module and calling generate barcode in the OnAfterRenderAsync method.

Note: If you have not done so already, I recommend you read the article on Blazor WASM Javascript Interop and Isolation.

The above article will help you to understand how to interop with javascript from blazor wasm and vice versa. Here is the bwipjs code to generate barcode.

In the above code we are importing bwip.min.js library and just calling the toCanvas method of bwipjs to generate the barcode with some default parameters. All these parameters can be passed to the BwipJsBarcode component as parameters and can be passed to generateBarcode() js method and made more dynamic and reusable.

Alright, now let's have a demo of how our bwip barcode component works.

That's it all we have to do now is to make use of our BwipJsBarcode component and improve it by adding parameter and pass the barcode text, type or any other options needed to it make it more dynamic and resuable.

Summary

In this article we learnt how to generate barcode in blazor wasm application using bwip-js. We leveraged the power of HTML5 Canvas and C# to generate the barcode using bwip-js. In the next article we will learn how to print the generated barcode to labels using a label printer.