Generate barcode in angular 2 nativescript - angular2-nativescript

Question

I need to generate barcode based on some string data in angular2 nativescript.
Please help me to achieve this.

Answer 1

Font wasn't a good option for my purposes because I can't control it's width/height.
nativescript-zxing is not compatible with nativescript-barcodescanner.
So, I've done next thing
import { DOMImplementation, XMLSerializer } from 'xmldom';
import * as JsBarcode from 'jsbarcode';
const xmlSerializer = new XMLSerializer();
const document = new DOMImplementation().createDocument('http://www.w3.org/1999/xhtml', 'html', null);
const svgNode = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
JsBarcode(svgNode, 'test', { xmlDocument: document });
const svgText = xmlSerializer.serializeToString(svgNode);
const buffer = new Buffer(svgText);
const src = `data:image/svg+xml;base64,${buffer.toString('base64')}`;
And now src can be passed to SVGImage from plugin nativescript-svg

Answer 2

You should probably try this one nativescript-zxing. This plugin allows you to read barcodes, QR-codes, etc. and create them as well based on provided string. Check the documentation for more information. Have a nice day!

Answer 3

If you only need to generate a barcode and not scan it, you can just use a barcode font and set it to your label, following these steps:
Find a barcode font that suits your needs and copy the font file to the /font folder in your app. This font is a good option.
Add create a new class in your app.css that sets the font-family to the barcode font:
.barcode {
font-family: free3of9 /* Replace with the actual name of your font, free3of9 is the name of the font above */
}
Add Label with text set to the value that you want the barcode to represent and class set to your css class. In order to work correctly you need to prefix and suffix the text with *'s. For example, if you want your barcode to read 12316516132, your Label should look like:
&ltLabel text="*12316516132*" class="barcode"></Label>
This is more efficient way than installing a plugin as it has very little footprint on your application resources.

Answer 4

Thanks to #rsboarder I was able to provide a final solution.
Below the steps should be done to make it work
Install (if any) the following plugins:
npm i jsbarcode
npm i xmldom
npm i #sergeymell/nativescript-svg
don't forget to add this to the module yourname.module.ts
import { NativeScriptSvgModule } from '#sergeymell/nativescript-svg/angular'
...
imports [
...
NativeScriptSvgModule
...
]
...
My config it looks like this:
Create this method on your component yourname.component.ts
import * as JsBarcode from 'jsbarcode'
import { DOMImplementation, XMLSerializer } from 'xmldom'
import { Buffer } from 'buffer'
import { ImageSource } from '#nativescript/core'
...
getBarcodeSVGSrc(barcodeNumber, barcodeFormat: string): string {
const xmlSerializer = new XMLSerializer()
const document = new DOMImplementation().createDocument('http://www.w3.org/1999/xhtml', 'html', null)
const svgNode = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
let data: string = barcodeNumber
const result: ImageSource = new ImageSource()
JsBarcode(svgNode, data, {
xmlDocument: document,
format: barcodeFormat // here: https://github.com/lindell/JsBarcode/wiki/ the various barcode formats EAN13, CODE38, etc.
})
const svgText = xmlSerializer.serializeToString(svgNode)
const buffer = Buffer.from(svgText)
return `data:image/svg+xml;base64,${buffer.toString('base64')}`
}
Complete the HTML file yourname.component.html
< StackLayout >
<SVGImage [src]="getBarcodeSVGSrc(item.barcodenr, item.barcodetype)">
< /StackLayout >