Generating Barcode (Bankary billet) with Angular

Question

I have an application running in angular 5 (using angular cli), I’m performing integration with a payment method, I already have all the data necessary to generate the billet, then the headache started, generate the barcode. I tried to use some lib JS, such as boleto.js or boleto br, but I did not have much success, the standard of febracan is intercalated 2 and 5, I tried to research some equivalent exterior pattern but also did not have much success. Does anyone have any tips ?

Answer 1

You can take a look at the package that exists for angular 1.5 and adapt it to angular 5: https://github.com/allansli/angular-barcode-febraban#readme

Use the source: https://github.com/allansli/angular-barcode-febraban/blob/master/assets/fonts/BarcodeInterleaved2of5.ttf

Create a font class:

@font-face {
    font-family: "BarcodeInterleaved2of5";
    src: url("../fonts/BarcodeInterleaved2of5.ttf") format("truetype");
}

.barcodei2of5 {
     font-family: "BarcodeInterleaved2of5";
     font-size: 200px;
}

Use the function that generates the sequence interpreted by the source:

 function generateBarcodeSequence(barcode) {
        var barcodeSequence = "";

        if (barcode.length > 0 &&
            barcode.length % 2 === 0) {
            for (var index = 0; index < barcode.length; index = index + 2) {

                var item = Number(barcode.substr(index, 2));
                var charCode;

                if (item <= 49) {
                    charCode = item + 48;
                }
                else {
                    charCode = item + 142;
                }

                barcodeSequence = barcodeSequence + String.fromCharCode(charCode);
            }

            barcodeSequence = "(" + barcodeSequence + ")";
        }

        return barcodeSequence;
    }

Finally you encapsulate in a component of Angular 5 and use in your screens.

Answer 2

Here’s a simple tip...

Use a barcode source, 3 of 9 Barcode is an example

to use this source just put asterisk before the first number and asterisk after the last.