導出選項

---

立即下載Kendo UI for Angular

條形碼和二維碼為圖像、SVG和PDF導出提供內置支持。

您可以將導出輸出作為base64編碼的字符串發送到遠程服務，或者將其保存在客戶端機器上。

與所有的Kendo UI for Angular組件類似，條形碼和二維碼也可以包含在PDF導出組件創建的中。

條形碼支持以下選項：

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

導出為圖像

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

導出為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);

導出為繪圖視覺效果

和方法會返回一個繪圖場景，您可以進一步處理它。

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

查看源代碼：

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

導出為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);