Generating Barcode (bank slip) with Angular

0

I have an application running in angular 5 (using angular cli), I'm performing integration with a payment medium, I already have all the data needed to generate the ticket, then the headache started, generate the barcode. I tried to use some JS lib, such as boleto.js or boleto br, but I did not have much success, the febracan pattern is interleaved 2 and 5, I tried to search for some equivalent outside standard but also did not have much success. Anyone have any tips?

    
asked by anonymous 29.01.2018 / 23:01

2 answers

2

You can take a look at the package that exists for the angular 1.5 and adapt it to the angle 5: link

Using the source: link

Create a class for the font :

@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 font :

 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 an Angular 5 component and use it on your screens.

    
21.07.2018 / 18:54
0

Go a simple tip ...

Use a barcode font, 3 of 9 barcode is an example

To use this font, just place an asterisk before the first number and an asterisk after the last one.

    
29.01.2018 / 23:25