導(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)建的中。

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

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

導(dǎo)出為圖像

下面的示例演示了如何使用 和方法將條形碼保存為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="http://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

下面的示例演示了如何使用和方法將條形碼和二維碼保存為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="http://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)出為繪圖視覺(jué)效果

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

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

查看源代碼：

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="http://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文件。

查看源代碼：

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="http://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);