文档半岛外围网上直营>>telerik中文文档>>导出选项

导出选项

立即下载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="//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="//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="//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="//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);

半岛外围网上直营

导出选项

导出为图像

导出为SVG

导出为绘图视觉效果

导出为PDF格式

用科技创就卓越

Create excellence with technology