Print and Export in Angular Linear Gauge component

22 Jul 2021 / 3 minutes to read

Print

The rendered Linear Gauge can be printed directly from the browser by calling the print method. To use the print functionality, set the allowPrint property as ”true” and inject the PrintService in the providers.

Source

Preview

app.component.ts

app.module.ts

main.ts

import { Component, ViewChild } from '@angular/core';
import { PrintService, LinearGaugeComponent } from '@syncfusion/ej2-angular-lineargauge';
@Component({
    selector: 'app-container',
    template: `
    <ejs-lineargauge id="gauge-container" [allowPrint]=true #gauge>
    </ejs-lineargauge><div> <button  id='print' (click)='print()'>Print</button></div>`,
    providers: [PrintService]
})
export class AppComponent {
  @ViewChild('gauge')
  public gaugeObj: LinearGaugeComponent;
  print() {
    this.gaugeObj.print();
  };
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, LinearGaugeModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ GaugeTooltipService ]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Export

Image Export

To use the image export functionality, set the allowImageExport property as ”true” and inject the ImageExportService in the providers. The rendered Linear Gauge can be exported as an image using the export method. This method requires two parameters: export type and file name. The Linear Gauge can be exported as an image with the following formats.

JPEG
PNG
SVG

Source

Preview

app.component.ts

app.module.ts

main.ts

import { Component, ViewChild } from '@angular/core';
import { ImageExportService, LinearGaugeComponent } from '@syncfusion/ej2-angular-lineargauge';
@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container" [allowImageExport]=true #gauge>
</ejs-lineargauge><div><button  id='export' (click)='export()'>Export</button></div>`,
providers: [ImageExportService]
})
export class AppComponent {
@ViewChild('gauge')
public gaugeObj: LinearGaugeComponent;
public export() {
  this.gaugeObj.export('PNG', 'Gauge');
};
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, LinearGaugeModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ GaugeTooltipService ]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

PDF Export

To use the PDF export functionality, set the allowPdfExport property as ”true” and inject the PdfExportService in the providers. The rendered Linear Gauge can be exported as PDF using the export method. The export method requires three parameters: file type, file name and orientation of the PDF document. The orientation of the PDF document can be set as ”Portrait” or ”Landscape“.

Source

Preview

app.component.ts

app.module.ts

main.ts

import { Component, ViewChild } from '@angular/core';
import { PdfExportService, LinearGaugeComponent } from '@syncfusion/ej2-angular-lineargauge';
@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container" [allowPdfExport]=true #gauge>
</ejs-lineargauge><div> <button  id='export' (click)='export()'>Export</button></div>`,
providers: [PdfExportService]
})
export class AppComponent {
  @ViewChild('gauge')
  public gaugeObj: LinearGaugeComponent;
  public export(){
this.gaugeObj.export('PDF', 'Gauge', 0);
  };
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, LinearGaugeModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ GaugeTooltipService ]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Exporting Linear Gauge as base64 string of the file

The Linear Gauge can be exported as base64 string for the JPEG, PNG and PDF formats. The rendered Linear Gauge can be exported as base64 string of the exported image or PDF document used in the export method. The arguments that are required for this method is export type, file name, orientation of the exported PDF document and ”allowDownload” boolean value that is set as ”false” to return base64 string. The value for the orientation of the exported PDF document is set as ”null” for image export and ”Portrait” or ”Landscape” for the PDF document.

Source

Preview

app.component.ts

app.module.ts

main.ts

import { Component, ViewChild } from '@angular/core';
import { ImageExportService, LinearGaugeComponent } from '@syncfusion/ej2-angular-lineargauge';
@Component({
selector: 'app-container',
template: `
<ejs-lineargauge id="gauge-container" [allowImageExport]=true #gauge>
</ejs-lineargauge><div> <button  id='export' (click)='export()'>Export</button></div>`,
providers: [ImageExportService]
})
export class AppComponent {
  @ViewChild('gauge')
  public gaugeObj: LinearGaugeComponent;
  public export(){
const promise = this.gaugeObj.export('PNG', 'Gauge', null, false);
promise.then((data)=>{
  document.writeln(data);
})
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LinearGaugeModule } from '@syncfusion/ej2-angular-lineargauge';
import { GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, LinearGaugeModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ GaugeTooltipService ]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Note: The exporting of the Linear Gauge as base64 string is not applicable for the SVG format.

Contents

Print
Export
Image Export
PDF Export
Exporting Linear Gauge as base64 string of the file

Contents

Print
Export
Image Export
PDF Export
Exporting Linear Gauge as base64 string of the file