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
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,
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
HTML5 Canvas and
Create a new component called
BwipJsBarcode.razor and add the following code to it.
Code Sample - Blazor WASM bwipjs Barcode Component
In the above code we are just creating a
Canvas element and assigning it an id of
And we are loading the our js helper module and calling generate barcode in the
code to generate barcode.
Code Sample - bwipjs barcode generation
In the above code we are importing
bwip.min.js library and just calling the
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.
Demo - Generating Barcode using bwip-js in Blazor WASM
Scenario - Let's try generating barcode using our
BwipJsBarcode component. Try inputting different values and click on
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.
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.