彩票走势图

logo 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);
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP