syncfusion-vue-barcode

Syncfusion Vue バーコードジェネレーターの実装

Syncfusion のバーコードコンポーネントを使用して、Vue アプリケーションでプロフェッショナルなバーコード、QR コード、Data Matrix コードを生成します。複数のバーコードタイプ、エクスポート形式、豊富なカスタマイズオプションに対応しています。

このスキルを使用する場面

• バーコード生成を実装する： Code39、Code128、Code93 などのバーコードタイプを作成する
• QR コードを生成する： URL、連絡先情報、データ共有に使える、スキャン可能な 2D QR コードを作成する
• Data Matrix コードを作成する： 製品の追跡やラベル用の産業向け 2D バーコードを生成する
• バーコードをエクスポートする： バーコードを画像（PNG、JPG、SVG）または Base64 文字列としてダウンロードする
• 外観をカスタマイズする： バーコードのサイズ、色、レンダリングモード（SVG と Canvas）を設定する
• Vue アプリにバーコードを追加する： Composition API または Options API を使用してコンポーネントを統合する
• 実際の用途に対応する： 製品バーコード、在庫追跡、配送ラベル、QR コードメニュー

ドキュメントガイド

はじめに

📄 参照： references/getting-started.md

• インストールと npm 依存関係
• Vue 2 と Vue 3 のセットアップ
• Composition API と Options API での登録
• コンポーネントの基本設定

バーコードジェネレーターコンポーネント

📄 参照： references/barcode-generator.md

• BarcodeGenerator コンポーネントの概要
• バーコードタイプ（Code39、Code128、Code93、Code32、Code11）
• 実装と設定
• タイプ別の例
• Props リファレンス

QR コードジェネレーターコンポーネント

📄 参照： references/qrcode-generator.md

• QRCodeGenerator コンポーネント
• QR コードのバージョンとデータ容量
• 2D QR コードの生成
• 設定オプション
• 実際の用途

Data Matrix ジェネレーターコンポーネント

📄 参照： references/datamatrix-generator.md

• DataMatrixGenerator コンポーネント
• Data Matrix 2D エンコーディング
• 産業用途
• 設定とサイズ指定
• パフォーマンスに関する考慮事項

エクスポート機能

📄 参照： references/export-functionality.md

• 画像としてエクスポート（PNG、JPG、SVG 形式）
• Base64 文字列としてエクスポート
• ブラウザーからのダウンロード
• ファイル名の規則
• Composition API と Options API でのエクスポートパターン

スタイリングとレンダリングモード

📄 参照： references/styling-and-modes.md

• SVG と Canvas のレンダリングモード
• 幅と高さの設定
• CSS スタイリングとレスポンシブデザイン
• 色のカスタマイズ
• テーマとの統合

一般的なユースケースとパターン

📄 参照： references/common-use-cases.md

• 製品バーコード生成のワークフロー
• URL 共有用の QR コード
• 配送ラベルのバーコード
• 実際の実装パターン
• パフォーマンスと最適化のヒント

クイックスタートの例

シンプルな QR コードを生成する

<template>
  <div class="barcode-container">
    <ejs-qrcodegenerator
      id="qrcode"
      ref="qrcodeControl"
      :width="width"
      :height="height"
      :value="value"
      :mode="mode"
    ></ejs-qrcodegenerator>
  </div>
</template>

<style>
  .barcode-container {
    height: 200px;
    width: 200px;
    padding: 20px;
  }
</style>

<script setup>
import { QRCodeGeneratorComponent as EjsQrcodegenerator } from '@syncfusion/ej2-vue-barcode-generator';

const width = "200px";
const height = "200px";
const mode = "SVG";
const value = "https://www.syncfusion.com";
</script>

一般的なパターン

パターン 1：ユーザー入力による動的なバーコード生成

<template>
  <div>
    <input v-model="barcodeValue" placeholder="Enter barcode data" />
    <button @click="generateBarcode">Generate Barcode</button>
    <ejs-barcodegenerator
      id="barcode"
      ref="barcodeControl"
      :value="barcodeValue"
      :type="barcodeType"
      width="200px"
      height="150px"
    ></ejs-barcodegenerator>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { BarcodeGeneratorComponent as EjsBarcodegenerator } from '@syncfusion/ej2-vue-barcode-generator';

const barcodeValue = ref("PRODUCT123");
const barcodeType = ref("Code128");

const generateBarcode = () => {
  // Barcode updates automatically when value changes
  console.log("Generated barcode for:", barcodeValue.value);
};
</script>

パターン 2：バーコードを画像としてエクスポートする

<template>
  <div>
    <ejs-qrcodegenerator
      id="qrcode"
      ref="qrcodeControl"
      value="https://www.example.com"
      width="200px"
      height="200px"
    ></ejs-qrcodegenerator>
    <button @click="exportAsImage">Download QR Code</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { QRCodeGeneratorComponent as EjsQrcodegenerator } from '@syncfusion/ej2-vue-barcode-generator';

const qrcodeControl = ref(null);

const exportAsImage = () => {
  if (qrcodeControl.value) {
    const instance = qrcodeControl.value.ej2_instances[0];
    instance.exportImage('qrcode', 'PNG');
  }
};
</script>

パターン 3：1 つのビューに複数のバーコードタイプを表示する

<template>
  <div class="barcode-grid">
    <div class="barcode-item">
      <h3>Barcode (Code128)</h3>
      <ejs-barcodegenerator
        type="Code128"
        value="SYNC123456"
        width="200px"
        height="150px"
      ></ejs-barcodegenerator>
    </div>
    <div class="barcode-item">
      <h3>QR Code</h3>
      <ejs-qrcodegenerator
        value="https://www.syncfusion.com"
        width="200px"
        height="200px"
      ></ejs-qrcodegenerator>
    </div>
    <div class="barcode-item">
      <h3>Data Matrix</h3>
      <ejs-datamatrixgenerator
        value="SHIPMENT-12345"
        width="200px"
        height="200px"
      ></ejs-datamatrixgenerator>
    </div>
  </div>
</template>

<style scoped>
  .barcode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }
  
  .barcode-item {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
</style>

<script setup>
import { BarcodeGeneratorComponent as EjsBarcodegenerator } from '@syncfusion/ej2-vue-barcode-generator';
import { QRCodeGeneratorComponent as EjsQrcodegenerator } from '@syncfusion/ej2-vue-barcode-generator';
import { DataMatrixGeneratorComponent as EjsDatamatrixgenerator } from '@syncfusion/ej2-vue-barcode-generator';
</script>

主な Props の概要

Prop	型	目的	一般的な値
value	string	エンコードするデータ	"PRODUCT123"、URL、テキスト
width	string	コンポーネントの幅	"200px"、"100%"
height	string	コンポーネントの高さ	"150px"、"200px"
type	string	バーコードタイプ（BarcodeGenerator のみ）	"Code39"、"Code128"、"Code93"
mode	string	レンダリングモード	"SVG"、"Canvas"
displayText	boolean	バーコードの下にテキストを表示する	true、false

関連スキル

• Syncfusion Vue コンポーネントの実装 - すべての Vue コンポーネントの概要
• カレンダーの実装 - 日付関連のバーコードデータに使用