DevExtreme React - Client-Side Exporting and Printing
Although DevExtreme data visualization widgets can be displayed on any device, a user may need a widget printed or in the form of a document. For these cases, the widgets provide client-side exporting and printing. This guide shows how to configure these features for the user, and how to export and print the Funnel widget using the API. It also explains how to set up a server-side proxy, which is necessary if you plan to support exporting and printing in Safari on MacOS.
User Interaction
To export or print the Funnel, a user clicks the "Exporting/Printing" button and selects a command from the drop-down menu. The Print command opens the browser's Print window that lets the user select preferred printing settings and send the print job to the printer. The other commands save a file of the selected format in the user's local storage.
You can enable both exporting and printing by setting the export.enabled option to true. If you need only exporting to be available to the user, disable printing by assigning false to the export.printingEnabled option.
jQuery
$(function() { $("#funnelContainer").dxFunnel({ // ... export: { enabled: true, printingEnabled: false } }); });
Angular
<dx-funnel ... > <dxo-export [enabled]="true" [printingEnabled]="false"> </dxo-export> </dx-funnel>
import { DxFunnelModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxFunnelModule ], // ... })
Vue
<template> <DxFunnel ... > <DxExport :enabled="true" :printing-enabled="false" /> </DxFunnel> </template> <script> import DxFunnel, { DxExport } from 'devextreme-vue/funnel'; export default { components: { DxFunnel, DxExport } } </script>
React
import React from 'react'; import Funnel, { Export } from 'devextreme-react/funnel'; class App extends React.Component { render() { return ( <Funnel ... > <Export enabled={true} printingEnabled={false} /> </Funnel> ); } } export default App;
If you want to restrict the set of formats available for exporting, change the export.formats array. You can also specify the default name for the exported file using the fileName option.
jQuery
$(function() { $("#funnelContainer").dxFunnel({ // ... export: { enabled: true, formats: ["PNG", "JPEG"], fileName: "exported_funnel" } }); });
Angular
<dx-funnel ... > <dxo-export [enabled]="true" [formats]="['PNG', 'JPEG']" fileName="exported_funnel"> </dxo-export> </dx-funnel>
import { DxFunnelModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxFunnelModule ], // ... })
Vue
<template> <DxFunnel ... > <DxExport :enabled="true" :formats="exportFormats" file-name="exported_funnel" /> </DxFunnel> </template> <script> import DxFunnel, { DxExport } from 'devextreme-vue/funnel'; export default { components: { DxFunnel, DxExport }, data() { return { exportFormats: ['PNG', 'JPEG'] } } } </script>
React
import React from 'react'; import Funnel, { Export } from 'devextreme-react/funnel'; const exportFormats = ['PNG', 'JPEG']; class App extends React.Component { render() { return ( <Funnel ... > <Export enabled={true} formats={exportFormats} fileName="exported_funnel" /> </Funnel> ); } } export default App;
To support exporting and printing in Safari on MacOS, you need to set up a proxy on your server. For details, see the Set Up a Server-Side Proxy topic.
API
To export the Funnel using the API, call the exportTo(fileName, format) method passing the needed file name and format ("PNG", "PDF", "JPEG", "SVG" or "GIF") as the arguments. To print the Funnel, call the print() method. This command opens the browser's Print window.
jQuery
var funnel = $("#funnelContainer").dxFunnel("instance"); funnel.exportTo('Exported Funnel', 'PDF'); funnel.print();
Angular
import { ..., ViewChild } from "@angular/core"; import { DxFunnelModule, DxFunnelComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxFunnelComponent, { static: false }) funnel: DxFunnelComponent; // Prior to Angular 8 // @ViewChild(DxFunnelComponent) funnel: DxFunnelComponent; exportFunnel () { this.funnel.instance.exportTo('Exported Funnel', 'PDF'); }; printFunnel () { this.funnel.instance.print(); }; } @NgModule({ imports: [ // ... DxFunnelModule ], // ... })
Vue
<template> <DxFunnel ref="funnel" /> </template> <script> import DxFunnel from 'devextreme-vue/funnel'; export default { components: { DxFunnel }, methods: { exportFunnel () { return this.$refs.funnel.instance.exportTo('Exported Funnel', 'PDF'); }, printFunnel () { return this.$refs.funnel.instance.print(); } } } </script>
React
import React from 'react'; import Funnel from 'devextreme-react/funnel'; class App extends React.Component { constructor(props) { super(props); this.funnelRef = React.createRef(); } render() { return ( <Funnel ref={this.funnelRef} /> ); } get funnel() { return this.funnelRef.current.instance; } exportFunnel () { return this.funnel.exportTo('Exported Funnel', 'PDF'); } printFunnel () { return this.funnel.print(); } } export default App;
You can also export several widgets at once using their SVG markup. Gather the markup from all required widgets by calling the DevExpress.viz.getMarkup(widgetInstances) method, and then pass the markup to the DevExpress.viz.exportFromMarkup(markup, options) method.
jQuery
var funnel1 = $("#funnelContainer1").dxFunnel("instance"); var funnel2 = $("#funnelContainer2").dxFunnel("instance"); var funnelMarkup = DevExpress.viz.getMarkup([funnel1, funnel2]); DevExpress.viz.exportFromMarkup(funnelMarkup, { height: 768, width: 1024, fileName: "Exported Funnels", format: "PDF" });
Angular
import { ..., ViewChild } from "@angular/core"; import { DxFunnelModule, DxFunnelComponent } from "devextreme-angular"; import exportMethods from "devextreme/viz/export"; // ... export class AppComponent { @ViewChild('funnelContainer1', { static: false }) funnel1: DxFunnelComponent; @ViewChild('funnelContainer2', { static: false }) funnel2: DxFunnelComponent; // Prior to Angular 8 // @ViewChild('funnelContainer1') funnel1: DxFunnelComponent; // @ViewChild('funnelContainer2') funnel2: DxFunnelComponent; exportSeveralFunnels () { let funnelMarkup = exportMethods.getMarkup([this.funnel1.instance, this.funnel2.instance]); exportMethods.exportFromMarkup(funnelMarkup, { height: 768, width: 1024, fileName: "Exported Funnels", format: "PDF" }); }; } @NgModule({ imports: [ // ... DxFunnelModule ], // ... })
<dx-funnel id="funnelContainer1" ... ></dx-funnel> <dx-funnel id="funnelContainer2" ... ></dx-funnel>
Vue
<template> <DxFunnel ref="funnel1" /> <DxFunnel ref="funnel2" /> </template> <script> import DxFunnel from 'devextreme-vue/funnel'; import exportMethods from "devextreme/viz/export"; export default { components: { DxFunnel }, methods: { exportSeveralFunnels () { const funnel1 = this.$refs.funnel1.instance; const funnel2 = this.$refs.funnel2.instance; const funnelMarkup = exportMethods.getMarkup([funnel1, funnel2]); exportMethods.exportFromMarkup(funnelMarkup, { height: 768, width: 1024, fileName: "Exported Funnels", format: "PDF" }); } } } </script>
React
import React from 'react'; import Funnel from 'devextreme-react/funnel'; import exportMethods from "devextreme/viz/export"; class App extends React.Component { constructor(props) { super(props); this.funnel1Ref = React.createRef(); this.funnel2Ref = React.createRef(); } render() { return ( <Funnel ref={this.funnel1Ref} /> <Funnel ref={this.funnel2Ref} /> ); } get funnel1() { return this.funnel1Ref.current.instance; } get funnel2() { return this.funnel2Ref.current.instance; } exportSeveralFunnels () { const funnelMarkup = exportMethods.getMarkup([this.funnel1, this.funnel2]); exportMethods.exportFromMarkup(funnelMarkup, { height: 768, width: 1024, fileName: "Exported Funnels", format: "PDF" }); } } export default App;
Events
DevExtreme data visualization widgets raise the following exporting-related events.
exporting
Allows you to request exporting details or prevent exporting.exported
Allows you to notify an end user when exporting is completed.fileSaving
Allows you to access exported data in the BLOB format and/or prevent it from being saved in a file on the user's local storage.
You can handle these events with functions. If the handling functions are not going to be changed at runtime, assign them to the onExporting, onExported and onFileSaving options when you configure the widget.
jQuery
$(function() { $("#funnelContainer").dxFunnel({ // ... onExporting: function (e) { // Handler of the "exporting" event }, onExported: function (e) { // Handler of the "exported" event }, onFileSaving: function (e) { // Handler of the "fileSaving" event } }); });
Angular
<dx-funnel ... (onExporting)="onExporting($event)" (onExported)="onExported($event)" (onFileSaving)="onFileSaving($event)"> </dx-funnel>
import { DxFunnelModule } from "devextreme-angular"; // ... export class AppComponent { onExporting (e) { // Handler of the "exporting" event }; onExported (e) { // Handler of the "exported" event }; onFileSaving (e) { // Handler of the "fileSaving" event } } @NgModule({ imports: [ // ... DxFunnelModule ], // ... })
Vue
<template> <DxFunnel @exporting="onExporting" @exported="onExported" @file-saving="onFileSaving" /> </template> <script> import DxFunnel from 'devextreme-vue/funnel'; export default { components: { DxFunnel }, methods: { onExporting (e) { // Handler of the "exporting" event }; onExported (e) { // Handler of the "exported" event }; onFileSaving (e) { // Handler of the "fileSaving" event } } } </script>
React
import React from 'react'; import Funnel from 'devextreme-react/funnel'; class App extends React.Component { render() { return ( <Funnel onExporting={this.onExporting} onExported={this.onExported} onFileSaving={this.onFileSaving} /> ); } onExporting (e) { // Handler of the "exporting" event }; onExported (e) { // Handler of the "exported" event }; onFileSaving (e) { // Handler of the "fileSaving" event } } export default App;
Otherwise, or if you need several handlers for a single event, subscribe to the exporting-related events using the on(eventName, eventHandler) method. This approach is more typical of jQuery.
var exportedHandler1 = function (e) { // First handler of the "exported" event }; var exportedHandler2 = function (e) { // Second handler of the "exported" event }; $("#funnelContainer").dxFunnel("instance") .on("exported", exportedHandler1) .on("exported", exportedHandler2);
See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
If you have technical questions, please create a support ticket in the DevExpress Support Center.