React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Print and Export in React Linear Gauge component

25 Jan 2023 / 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 Print module into services.

Source
Preview
index.jsx
index.tsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { LinearGaugeComponent, Print, Inject } from '@syncfusion/ej2-react-lineargauge';
export function App() {
    let gaugeInstance;
    function clickHandler() {
        gaugeInstance.print();
    }
    return (<div>
    <ButtonComponent onClick={clickHandler}>print</ButtonComponent>
    <LinearGaugeComponent allowPrint={true} ref={g => gaugeInstance = g}>
        <Inject services={[Print]}/>
    </LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { LinearGaugeComponent, Print, Inject } from '@syncfusion/ej2-react-lineargauge';
export function App() {
    let gaugeInstance;
    function clickHandler(){
        gaugeInstance.print();
    }
    return (<div>
    <ButtonComponent onClick= {clickHandler}>print</ButtonComponent>
    <LinearGaugeComponent allowPrint={true}  ref={g => gaugeInstance = g}>
        <Inject services={[Print]} />
    </LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

Export

Image Export

To use the image export functionality, set the allowImageExport property as true and inject the ImageExport module into services. 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
index.jsx
index.tsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { LinearGaugeComponent, ImageExport, Inject } from '@syncfusion/ej2-react-lineargauge';
export function App() {
    function clickHandler() {
        gaugeInstance.export('PNG', 'Gauge');
    }
    let gaugeInstance;
    return (<div>
  <ButtonComponent onClick={clickHandler}>Export</ButtonComponent>
  <LinearGaugeComponent allowImageExport={true} ref={g => gaugeInstance = g}>
  <Inject services={[ImageExport]}/>
  </LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { LinearGaugeComponent, ImageExport, Inject } from '@syncfusion/ej2-react-lineargauge';
export function App() {
  function clickHandler(){
  gaugeInstance.export('PNG','Gauge');
  }
  let gaugeInstance;
  return (<div>
  <ButtonComponent onClick= { clickHandler}>Export</ButtonComponent>
  <LinearGaugeComponent allowImageExport={true} ref={g => gaugeInstance = g}>
  <Inject services={[ImageExport]} />
  </LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

PDF Export

To use the PDF export functionality, set the allowPdfExport property as true and inject the PdfExport module into services. 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
index.jsx
index.tsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { LinearGaugeComponent, PdfExport, Inject } from '@syncfusion/ej2-react-lineargauge';
export function App() {
    function clickHandler() {
        gaugeInstance.export('PDF', 'Gauge');
    }
    let gaugeInstance;
    return (<div>
<ButtonComponent onClick={clickHandler}>Export</ButtonComponent>
<LinearGaugeComponent allowPdfExport={true} ref={g => gaugeInstance = g}>
    <Inject services={[PdfExport]}/>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { LinearGaugeComponent, PdfExport, Inject } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function clickHandler(){
  gaugeInstance.export('PDF', 'Gauge');
}
let gaugeInstance;
return (<div>
<ButtonComponent onClick= { clickHandler}>Export</ButtonComponent>
<LinearGaugeComponent allowPdfExport={true} ref={g => gaugeInstance = g}>
    <Inject services={[PdfExport]} />
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

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
index.jsx
index.tsx
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { LinearGaugeComponent, ImageExport, Inject } from '@syncfusion/ej2-react-lineargauge';
export function App() {
    function clickHandler() {
        gaugeInstance.export('PNG', 'Gauge', null, false).then((data) => {
            document.writeln(data);
        });
    }
    let gaugeInstance;
    return (<div>
<ButtonComponent onClick={clickHandler}>Export</ButtonComponent>
<LinearGaugeComponent allowImageExport={true} ref={g => gaugeInstance = g}>
    <Inject services={[ImageExport]}/>
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
Copied to clipboard
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { LinearGaugeComponent, ImageExport, Inject } from '@syncfusion/ej2-react-lineargauge';
export function App() {
function clickHandler(){
    gaugeInstance.export('PNG', 'Gauge', null, false).then((data)=>{
        document.writeln(data);
    })
}
let gaugeInstance;
return (<div>
<ButtonComponent onClick= { clickHandler}>Export</ButtonComponent>
<LinearGaugeComponent allowImageExport={true} ref={g => gaugeInstance = g}>
    <Inject services={[ImageExport]} />
</LinearGaugeComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);

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

Previous
Next