條形碼類型

---

立即下載Kendo UI for Angular

Kendo UI for Angular條碼支持多種一維(1D)工業(yè)條碼。

要配置條形碼符號(編碼方案)，請?jiān)O(shè)置type屬性。

 下表列出了每種條形碼的可用類型和支持的值，請注意校驗(yàn)和數(shù)字是自動計(jì)算的，并且所有類型值也可以用小寫字母拼寫。

提示：如果值與所選類型的限制不匹配，Barcode將拋出錯誤。始終使用您期望在實(shí)際使用中看到的值來測試應(yīng)用程序。

下面的例子演示了每種條形碼類型的作用：

查看源代碼：

• app.component.ts：

import { Component } from '@angular/core';
import { BarcodeType } from '@progress/kendo-angular-barcodes';

@Component({
selector: 'my-app',
styles: [`
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}

.k-card {
flex: 0 0 auto;
}

.k-barcode {
width: 300px;
height: 100px;
}

.k-card-title {
font-family: sans-serif;
}
`],
template: `
<div class="cards">
<div class="k-card k-text-center"
*ngFor="let item of allBarcodes">
<div class="k-card-header">
<div class="k-card-title">
{{ item.name }}
</div>
</div>
<div class="k-card-body">
<kendo-barcode [type]="item.type" [value]="item.value">
</kendo-barcode>
</div>
</div>
</div>
`
})
export class AppComponent {
public allBarcodes: {
type: BarcodeType;
name: string;
value: string;
}[] = [
{ type: 'EAN13', name: 'EAN-13', value: '123456789012' },
{ type: 'EAN8', name: 'EAN-8', value: '1234567' },

{ type: 'UPCA', name: 'UPC-A', value: '12345678901' },
{ type: 'UPCE', name: 'UPC-E', value: '123456' },

{ type: 'Code11', name: 'Code 11', value: '555-123' },

{ type: 'Code39', name: 'Code 39', value: 'CODE-39' },
{ type: 'Code39Extended', name: 'Code 39 (Extended)', value: '* Code-39 *' },

{ type: 'Code93', name: 'Code 93', value: 'CODE 93' },
{ type: 'Code93Extended', name: 'Code 93 (Extended)', value: '* Code 93 *' },

{ type: 'Code128', name: 'Code 128', value: '* Code 128 *' },
{ type: 'Code128A', name: 'Code 128A', value: '* CODE 128 *' },
{ type: 'Code128B', name: 'Code 128B', value: '* Code 128 *' },
{ type: 'Code128C', name: ' Code 128C', value: '112233' },

{ type: 'GS1-128', name: 'GS1-128', value: '00123456780000000001' },

{ type: 'MSImod10', name: 'MSI (Mod 10)', value: '1234567' },
{ type: 'MSImod11', name: ' MSI (Mod 11)', value: '1234567' },
{ type: 'MSImod1010', name: 'MSI (Mod 1010)', value: '1234567' },
{ type: 'MSImod1110', name: 'MSI (Mod 1110)', value: '1234567' },

{ type: 'POSTNET', name: 'POSTNET', value: '12345' }
];
}

• app.module.ts:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BarcodesModule } from '@progress/kendo-angular-barcodes';
import { ButtonsModule } from '@progress/kendo-angular-buttons';

import { AppComponent } from './app.component';

@NgModule({
imports: [ BrowserModule, BarcodesModule, ButtonsModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})

export class AppModule { }

• main.ts:

import './polyfills';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);