gcbc-gc-barcode-lwcコンポーネント

gcbc-gc-barcode-lwcコンポーネントについて説明します。

gcbc-gc-barcode-lwcコンポーネントの属性

属性名（HTML テンプレート） 属性名（JavaScript） 属性型 説明
image-height imageHeight Integer バーコード画像の高さをピクセル単位で指定します。実際に生成されるバーコードの画像の高さは、type属性で指定したバーコードの規格に基づいてimage-heightに近い値になります。既定値は100ピクセルです。
image-width imageWidth Integer バーコード画像の幅をピクセル単位で指定します。実際に生成されるバーコードの画像の幅は、type属性で指定したバーコードの規格に基づいてimage-widthに近い値になります。既定値は100ピクセルです。
output-format outputFormat String バーコード画像の形式を指定します。「PNG」または「SVG」を指定できます。既定値は「SVG」です。この値は大文字で指定します。
options options String バーコードタイプ固有の追加オプションを指定します。「バーコードのオプション」を参照してください。
type type String 生成するバーコードの種類を指定します。「バーコードの種類」を参照してください。既定値は「QRCode」です。　
value-string valueString String 必須項目。バーコードの値を設定します。値をURLエンコードする必要はありません。
onerror onError Event Handler エラー処理を行う関数を指定します。詳細は後述の「エラーイベント」を参照してください。

エンコーディング形式

RayBarcodeでは既定のエンコーディング形式にShift-JIS（シフトJIS）を使用します。UTF-8を使用する場合はオプションを指定する必要があります。次のようになります。

<gcbc-gc-barcode-lwc
    value-string="490210200005"
    type="QRCode"
    options='{"EncodingCodePage":"65001"}'
    image-width="200"
    image-height="100"
    output-format="PNG">
</gcbc-gc-barcode-lwc>

エラーイベント

エラーが発生した場合、エラーイベントが発生します。 エラーイベントでは、エラーメッセージを取得できエラーを処理するためコードを記述することができます。

イベントで渡されるデータは以下のとおりです。

{ detail: 
  { 
    message: "error",
    handled: false 
  }
}
  • detail.message: エラーメッセージです。
  • detail.handled: デフォルトはfalseです。trueに変更した場合は、RayBarcode利用側のコードでエラーを処理することを意味します。

エラー処理の例は以下のとおりです。以下の例では、typeが空のためエラーが発生しshowErrorでエラーが処理されます。

html

...
<gcbc-gc-barcode-lwc
   value-string="QRCodeValue" 
   type="" 
   onerror={showError}>
</gcbc-gc-barcode-lwc>
...

js

...
showError(event){
    event.detail.handled = true; // mark this event is handled by user.
    var message = event.detail.message;
    alert(message);
}
...
Copyright © MESCIUS inc. All rights reserved.