MENU
【他サイト】フリーランスエンジニアの教科書
フリーランスエンジニアの教科書
【他サイト】仮想通貨の教科書
仮想通貨の教科書

【Angular】JsBarcodeでバーコードを表示する方法!

当ページのリンクには広告が含まれています。
【Angular】JsBarcodeでバーコードを表示する方法
いずみ

こんな悩みを解決できる記事を書きました!

僕は現役フリーランスエンジニア(歴年)で、資格は個保有しています。

AngularのJsBarcodeでバーコードを表示する方法を知りたい」とお考えではありませんか?

JsBarcodeを使えば↓のようなバーコードを簡単に表示できます。

いずみ

めちゃくちゃ簡単なのでサクッと解説します。

本記事を読めば、AngularのJsBarcodeでバーコードを表示する方法について分かるので早速見ていきましょう!

いずみ

すぐ読み終わるので、ぜひ最後まで読んでくださいませ。

執筆者/監修者
  • フリーランスエンジニア(保有資格個)
  • ブログ・アフィリエイト歴7年(2018年〜)
  • ブランドせどりで月利50万円⇨脱サラ
  • 投資(仮想通貨・FX)歴7年(2018年〜)
  • X(旧Twitter)フォロワー約1,900人
  • 運営者情報はこちら
いずみです
目次

【Angular】JsBarcodeでバーコードを表示する方法

早速ですが、AngularのJsBarcodeでバーコードを表示する方法を解説します。

STEP
JsBarcodeをインストールする
npm install jsbarcode

JsBarcodeをインストールします。

STEP
バーコードを描画する
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でバーコードを表示する方法について解説しました。

以下が本記事のまとめになります。

まとめ
  • JsBarcodeを使うとAngularで簡単にバーコードを表示できる。
  • CODE128以外のバーコードフォーマットにも対応している。
まとめ
  • おすすめ本
¥4,070 (2023/07/23 15:56時点 | Amazon調べ)

Angularの勉強なら「」が分かりやすくておすすめですよ♪

いずみ

最後までお読みいただき、ありがとうございました!

  • クソおすすめ本
¥4,480 (2024/06/01 23:28時点 | Amazon調べ)
いずみ

海外のエンジニアがどういった思考で働いているかが理解できます。

海外に行く気はないけど海外エンジニアの動向が気になる雑魚エンジニアにおすすめです(本当におすすめな本しか紹介しないのでご安心を)。

【Angular】JsBarcodeでバーコードを表示する方法

この記事が気に入ったら
フォローしてね!

シェアしてね!
  • URLをコピーしました!
目次