syncfusion-vue-barcode

实现 Syncfusion Vue 条码生成器

在 Vue 应用中使用 Syncfusion 的条码组件生成专业的条码、QR 码和 Data Matrix 码。支持多种条码类型、导出格式和全面的自定义选项。

何时使用此技能

• 实现条码生成： 创建 Code39、Code128、Code93 和其他条码类型
• 生成 QR 码： 创建可扫描的二维 QR 码，用于网址、联系信息或数据共享
• 创建 Data Matrix 码： 生成用于产品追踪和标签的工业级二维条码
• 导出条码： 将条码下载为图像（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）
• 实现和配置
• 按类型提供的示例
• 属性参考

QR 码生成器组件

📄 阅读： references/qrcode-generator.md

• QRCodeGenerator 组件
• QR 码版本和数据容量
• 二维 QR 码生成
• 配置选项
• 实际应用场景

Data Matrix 生成器组件

📄 阅读： references/datamatrix-generator.md

• DataMatrixGenerator 组件
• Data Matrix 二维编码
• 工业应用
• 配置和尺寸设置
• 性能注意事项

导出功能

📄 阅读： 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

• 产品条码生成工作流
• 用于分享网址的 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：在一个视图中显示多种条码类型

<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>

主要属性概览

属性	类型	用途	常见值
value	string	要编码的数据	"PRODUCT123"、网址、文本
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 组件概览
• 实现日历 - 用于日期相关的条码数据