Ionicでbarcodeを生成する

Ionicでbarcodeを生成する方法です

とりあえず、blankで作成して、homeページにバーコードを表示してみます。
完成イメージ

プロジェクト作成

今回はbarcode-tutorialというプロジェクト名にしました。

ionic start barcode-tutorial blank

JsBarcodeのインストール

cd barcode-tutorial
npm install jsbarcode --save

プロジェクトにインポート

import JsBarcode from 'jsbarcode';を追加して、ページがロードされたときに呼ばれるionViewDidLoad（）で描画するようにします。

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import JsBarcode from 'jsbarcode';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad(){
    JsBarcode("#barcode","12345");
  }
}

svgで表示

<svg id = "barcode"></svg>を追加するだけです。

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <svg id = "barcode"></svg>
</ion-content>

オプション

バーコードの種類やサイズの変更の書き方はこんな感じです。
詳しい使い方などはここに書いてあります。

home.ts

  ionViewDidLoad(){
    JsBarcode("#barcode")
    .options({font:"OCR-B"})
    .CODE128("1234567890128",{fontSize:10,textMargin:0,height:50})
    .render();
  }