いずみこんな悩みを解決できる記事を書きました！
僕は現役フリーランスエンジニア（歴10年）で、資格は13個保有しています。
「AngularのJsBarcodeでバーコードを表示する方法を知りたい」とお考えではありませんか？
JsBarcodeを使えば↓のようなバーコードを簡単に表示できます。
いずみめちゃくちゃ簡単なのでサクッと解説します。
本記事を読めば、AngularのJsBarcodeでバーコードを表示する方法について分かるので早速見ていきましょう！
いずみすぐ読み終わるので、ぜひ最後まで読んでくださいませ。
【Angular】JsBarcodeでバーコードを表示する方法
早速ですが、AngularのJsBarcodeでバーコードを表示する方法を解説します。
npm install jsbarcodeJsBarcodeをインストールします。
import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import JsBarcode from 'jsbarcode';
@Component({
selector: 'app-barcode',
standalone: true,
template: '<svg #barcode></svg>',
})
export class BarcodeComponent implements AfterViewInit {
@ViewChild('barcode', { static: false }) barcode!: ElementRef;
ngAfterViewInit() {
JsBarcode(this.barcode.nativeElement, '123456789012', {
format: 'CODE128',
displayValue: true,
});
}
}上記のようにすれば、「123456789012」のバーコードが表示されます。
コード128形式を利用しており、商品コードの表示も可能です。
いずみめちゃ簡単にバーコードが表示できましたね。
よくある質問
JsBarcodeでQRコードを生成できますか？
JsBarcodeはバーコード専用なのでQRコードは生成できません。
QRコードを生成するにはqrcode-generatorなどのライブラリを使いましょう。
JsBarcodeで異なるバーコードの種類を使えますか？
CODE128以外にもEAN-13UPCなど複数のフォーマットに対応しています。
formatオプションを変更すればOKです。
まとめ
今回は、AngularのJsBarcodeでバーコードを表示する方法について解説しました。
以下が本記事のまとめになります。
- おすすめ本
Angularの勉強なら「Angularアプリケーションプログラミング
」が分かりやすくておすすめですよ♪
いずみ最後までお読みいただき、ありがとうございました！
- クソおすすめ本
いずみ海外のエンジニアがどういった思考で働いているかが理解できます。
海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです（本当におすすめな本しか紹介しないのでご安心を）。
