導(dǎo)出選項(xiàng)

---

立即下載Kendo UI for Angular

條形碼和二維碼為圖像、SVG和PDF導(dǎo)出提供內(nèi)置支持。

您可以將導(dǎo)出輸出作為base64編碼的字符串發(fā)送到遠(yuǎn)程服務(wù)，或者將其保存在客戶端機(jī)器上。

與所有的Kendo UI for Angular組件類似，條形碼和二維碼也可以包含在PDF導(dǎo)出組件創(chuàng)建的PDF文檔中。

條形碼支持以下選項(xiàng)：

• 導(dǎo)出為圖像
• 導(dǎo)出為可縮放矢量圖形(SVG)圖像格式
• 導(dǎo)出為可攜式文件格式(PDF)
• 導(dǎo)出到繪圖可視化

導(dǎo)出為圖像

下面的示例演示了如何使用BarcodeComponent.exportImage 和QRCodeComponent.exportImage方法將條形碼保存為PNG圖像。

查看源代碼：

app.component.ts：

import { Component, ViewChild } from '@angular/core';
import { BarcodeComponent, QRCodeComponent } from '@progress/kendo-angular-barcodes';
import { saveAs } from '@progress/kendo-file-saver';

@Component({
selector: 'my-app',
styles: [`
.k-card {
width: 200px;
}
`],
template: `
<div class="k-card-deck">
<div class="k-card k-text-center">
<div class="k-card-body">

<kendo-barcode #barcode type="Code128" value="Mascarpone">
</kendo-barcode>

</div>
<div class="k-card-actions k-card-actions-stretched">
<span class="k-card-action">
<button kendoButton fillMode="flat" themeColor="primary" (click)="exportBarcode()">Export as Image</button>
</span>
</div>
</div>
<div class="k-card k-text-center">
<div class="k-card-body">

<kendo-qrcode #qrcode value="https://www.telerik.com/kendo-angular-ui/"
errorCorrection="M">
</kendo-qrcode>

</div>
<div class="k-card-actions k-card-actions-stretched">
<span class="k-card-action">
<button kendoButton fillMode="flat" themeColor="primary" (click)="exportQRCode()">Export as Image</button>
</span>
</div>
</div>
</div>
`
})
export class AppComponent {
@ViewChild('barcode')
private barcode: BarcodeComponent;

@ViewChild('qrcode')
private qrcode: QRCodeComponent;

public exportBarcode(): void {
this.barcode.exportImage().then((dataURI) => {
saveAs(dataURI, 'barcode.png');
});
}

public exportQRCode(): void {
this.qrcode.exportImage().then((dataURI) => {
saveAs(dataURI, 'qrcode.png');
});
}
}

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

導(dǎo)出為SVG

下面的示例演示了如何使用BarcodeComponent.exportSVG和QRCodeComponent.exportSVG方法將條形碼和二維碼保存為SVG文件。

查看源代碼：

app.component.ts：

import { Component, ViewChild } from '@angular/core';
import { BarcodeComponent, QRCodeComponent } from '@progress/kendo-angular-barcodes';
import { saveAs } from '@progress/kendo-file-saver';

@Component({
selector: 'my-app',
styles: [`
.k-card {
width: 200px;
}
`],
template: `
<div class="k-card-deck">
<div class="k-card k-text-center">
<div class="k-card-body">

<kendo-barcode #barcode type="Code128" value="Mascarpone">
</kendo-barcode>

</div>
<div class="k-card-actions k-card-actions-stretched">
<span class="k-card-action">
<button kendoButton fillMode="flat" themeColor="primary" (click)="exportBarcode()">Export as SVG</button>
</span>
</div>
</div>
<div class="k-card k-text-center">
<div class="k-card-body">

<kendo-qrcode #qrcode value="https://www.telerik.com/kendo-angular-ui/"
errorCorrection="M">
</kendo-qrcode>

</div>
<div class="k-card-actions k-card-actions-stretched">
<span class="k-card-action">
<button kendoButton fillMode="flat" themeColor="primary" (click)="exportQRCode()">Export as SVG</button>
</span>
</div>
</div>
</div>
`
})
export class AppComponent {
@ViewChild('barcode')
private barcode: BarcodeComponent;

@ViewChild('qrcode')
private qrcode: QRCodeComponent;

public exportBarcode(): void {
this.barcode.exportSVG().then((dataURI) => {
saveAs(dataURI, 'barcode.svg');
});
}

public exportQRCode(): void {
this.qrcode.exportSVG().then((dataURI) => {
saveAs(dataURI, 'qrcode.svg');
});
}
}

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

導(dǎo)出為繪圖視覺效果

BarcodeComponentexportVisual和QRCodeComponentexportVisual方法會返回一個(gè)繪圖場景，您可以進(jìn)一步處理它。

下面的示例演示了如何使用exportVisual方法將條形碼導(dǎo)出為繪圖可視化場景。

查看源代碼：

app.component.ts：

import { Component, ViewChild } from '@angular/core';
import { BarcodeComponent, QRCodeComponent } from '@progress/kendo-angular-barcodes';
import { Group, exportImage, geometry } from '@progress/kendo-drawing';
import { saveAs } from '@progress/kendo-file-saver';

@Component({
selector: 'my-app',
styles: [`
.k-card {
width: 200px;
}
`],
template: `
<div class="k-card-deck">
<div class="k-card k-text-center">
<div class="k-card-header">
<div class="k-card-title">
Rotated on export
</div>
</div>
<div class="k-card-body">

<kendo-barcode #barcode type="Code128" value="Mascarpone">
</kendo-barcode>

</div>
<div class="k-card-actions k-card-actions-stretched">
<span class="k-card-action">
<button kendoButton fillMode="flat" themeColor="primary" (click)="exportBarcode()">Process & export</button>
</span>
</div>
</div>
<div class="k-card k-text-center">
<div class="k-card-header">
<div class="k-card-title">
Scaled on export
</div>
</div>
<div class="k-card-body">

<kendo-qrcode #qrcode value="https://www.telerik.com/kendo-angular-ui/"
errorCorrection="M">
</kendo-qrcode>

</div>
<div class="k-card-actions k-card-actions-stretched">
<span class="k-card-action">
<button kendoButton fillMode="flat" themeColor="primary" (click)="exportQRCode()">Process & export</button>
</span>
</div>
</div>
</div>
`
})
export class AppComponent {
@ViewChild('barcode')
private barcode: BarcodeComponent;

@ViewChild('qrcode')
private qrcode: QRCodeComponent;

public exportBarcode(): void {
const visual = this.barcode.exportVisual();
this.rotateVisual(visual, 90);

exportImage(visual).then((dataURI) => {
saveAs(dataURI, 'barcode-rotated.png');
});
}

public exportQRCode(): void {
const visual = this.qrcode.exportVisual();
this.scaleVisual(visual, 4);

exportImage(visual).then((dataURI) => {
saveAs(dataURI, 'qrcode-rotated.png');
});
}

private rotateVisual(visual: Group, rotationAngle: number): void {
const center = visual.bbox().center();
visual.transform(geometry.transform().rotate(rotationAngle, center));
}

private scaleVisual(visual: Group, scale: number): void {
const center = visual.bbox().center();
visual.transform(geometry.transform().scale(scale, scale, center));
}
}

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

導(dǎo)出為PDF格式

下面的示例演示了如何使用PDF Export組件將包含條形碼和二維碼的部分保存為PDF文件。

查看源代碼：

app.component.ts：

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
<div class="example-config">
<button kendoButton (click)="pdf.saveAs('invoice.pdf')">
Save As PDF...
</button>
</div>

<kendo-pdf-export #pdf paperSize="A4" margin="2cm">
<div class="k-card-deck">
<div class="k-card k-text-center">
<div class="k-card-header">
<div class="k-card-title">
Barcode
</div>
</div>
<div class="k-card-body">

<kendo-barcode #barcode type="Code128" value="Mascarpone">
</kendo-barcode>

</div>
</div>
<div class="k-card k-text-center">
<div class="k-card-header">
<div class="k-card-title">
QR Code
</div>
</div>
<div class="k-card-body">

<kendo-qrcode #qrcode value="https://www.telerik.com/kendo-angular-ui/"
errorCorrection="M">
</kendo-qrcode>

</div>
</div>
</div>
</kendo-pdf-export>
`,
styles: [`
.k-card {
width: 200px;
}

kendo-pdf-export {
font-family: "DejaVu Sans", "Arial", sans-serif;
font-size: 12px;
}
`]
})
export class AppComponent {
}

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 { PDFExportModule } from '@progress/kendo-angular-pdf-export';

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

@NgModule({
imports: [ BrowserModule, FormsModule, BarcodesModule, ButtonsModule, PDFExportModule ],
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);