I ❤️ .NET

Table of Contents

1. What we gonna do?
2. Why we gonna do?
3. How we gonna do?
4. Summary

What we gonna do?

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.

Why we gonna do?

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.

How we gonna do?

Generating Barcode

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

@using Microsoft.JSInterop

@implements IAsyncDisposable

<canvas id="bwipcanvas" width=1 height=1 style="border:1px solid #fff;background-color:white;"></canvas>

@code {
    private IJSObjectReference? module;
    [Inject] private IJSRuntime JSRuntime { get; set; } = default!;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/BlazorDemoComponents/generatebwipbarcode.js");
            await GenerateBarCode();
        }
    }

    private async Task GenerateBarCode()
    {
        if (module is not null)
        {
            await module.InvokeVoidAsync("generateBarcode");
        }
    }

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        if (module is not null)
        {
            await module.DisposeAsync();
        }
    }
}
        

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.

import("./bwip.min.js");

export function generateBarcode()
{
    bwipjs.toCanvas('bwipcanvas', {
        bcid: 'code128',       // Barcode type
        text: 'ilovedotnet.org',    // Text to encode
        scale: 3,               // 3x scaling factor
        height: 10,              // Bar height, in millimeters
        includetext: true,            // Show human-readable text
        textxalign: 'center',        // Always good to set this
    });
}
        

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 learned 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.