React Sankey - Client-Side Exporting and Printing

User Interaction

To export or print the UI component, a user clicks Exporting/Printing and selects a command from the drop-down menu.

The Print command opens the browser's Print window. This window allows a user to specify the print settings and send the print job to the printer.

The other commands save a file in the selected format on the user's device.

Sankey Export Menu

Set export.enabled to true to enable exporting and printing. To allow a user to only export, assign false to export.printingEnabled.

jQuery
JavaScript
$(function() {
    $("#sankeyContainer").dxSankey({
        // ...
        export: {
            enabled: true,
            printingEnabled: false
        }
    });
});
Angular
HTML
TypeScript
<dx-sankey ... >
    <dxo-export
        [enabled]="true"
        [printingEnabled]="false">
    </dxo-export>
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxSankey ... >
        <DxExport
            :enabled="true"
            :printing-enabled="false"
        />
    </DxSankey>
</template>

<script>
import DxSankey, { DxExport } from 'devextreme-vue/sankey';

export default {
    components: {
        DxSankey,
        DxExport
    }
}
</script>
React
App.js
import React from 'react';
import Sankey, { Export } from 'devextreme-react/sankey';

class App extends React.Component {
    render() {
        return (
            <Sankey ... >
                <Export
                    enabled={true}
                    printingEnabled={false}
                />
            </Sankey>
        )
    }
}

export default App;

Change the export.formats array to limit the set of export formats. You can also set the fileName property to specify the export file's name.

jQuery
JavaScript
$(function() {
    $("#sankeyContainer").dxSankey({
        // ...
        export: {
            enabled: true,
            formats: ["PNG", "JPEG"],
            fileName: "exported_sankey"
        }
    });
});
Angular
HTML
TypeScript
<dx-sankey ... >
    <dxo-export
        [enabled]="true"
        [formats]="['PNG', 'JPEG']"
        fileName="exported_sankey">
    </dxo-export>
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxSankey ... >
        <DxExport
            :enabled="true"
            :formats="exportFormats"
            file-name="exported_sankey"
        />
    </DxSankey>
</template>

<script>
import DxSankey, { DxExport } from 'devextreme-vue/sankey';

export default {
    components: {
        DxSankey,
        DxExport
    },
    data() {
        return {
            exportFormats: ['PNG', 'JPEG']
        }
    }
}
</script>
React
App.js
import React from 'react';
import Sankey, { Export } from 'devextreme-react/sankey';

const exportFormats = ['PNG', 'JPEG'];

class App extends React.Component {
    render() {
        return (
            <Sankey ... >
                <Export
                    enabled={true}
                    formats={exportFormats}
                    fileName="exported_sankey"
                />
            </Sankey>
        )
    }
}

export default App;

API

To export the UI component using the API, call the exportTo(fileName, format) method and pass the file name and format ("PNG", "PDF", "JPEG", "SVG" or "GIF") as the arguments. Call the print() method to print the UI component. This command opens the browser's Print window.

jQuery
JavaScript
var sankey = $("#sankeyContainer").dxSankey("instance");
sankey.exportTo("exported_sankey", "PDF");
sankey.print();
Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxSankeyModule, DxSankeyComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxSankeyComponent, { static: false }) sankey: DxSankeyComponent;
    // Prior to Angular 8
    // @ViewChild(DxSankeyComponent) sankey: DxSankeyComponent;
    exportSankey() {
        this.sankey.instance.exportTo("exported_sankey", "PDF");
    };
    printSankey() {
        this.sankey.instance.print();
    };
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxSankey ref="sankey" />
</template>

<script>
import DxSankey from 'devextreme-vue/sankey';

export default {
    components: {
        DxSankey
    },
    methods: {
        exportSankey () {
            return this.$refs.sankey.instance.exportTo("exported_sankey", "PDF");
        },
        printSankey () {
            return this.$refs.sankey.instance.print();
        }
    }
}
</script>
React
App.js
import React from 'react';
import Sankey from 'devextreme-react/sankey';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.sankeyRef = React.createRef();
    }
    render() {
        return (
            <Sankey ref={this.sankeyRef} />
        )
    }
    get sankey() {
        return this.sankeyRef.current.instance;
    }
    exportSankey () {
        return this.sankey.exportTo("exported_sankey", "PDF");
    }
    printSankey() {
        return this.sankey.print();
    }
}

export default App;

You can also export several UI components simultaneously using their SVG markup. Call the DevExpress.viz.getMarkup(widgetInstances) method to collect the markup from all the required UI components and pass it to the DevExpress.viz.exportFromMarkup(markup, options) method.

jQuery
JavaScript
var sankey1 = $("#sankeyContainer1").dxSankey("instance");
var sankey2 = $("#sankeyContainer2").dxSankey("instance");
var sankeyMarkup = DevExpress.viz.getMarkup([sankey1, sankey2]);

DevExpress.viz.exportFromMarkup(sankeyMarkup, {
    height: 768,
    width: 1024,
    fileName: "exported_sankeys",
    format: "PDF"
});
Angular
TypeScript
HTML
import { ..., ViewChild } from "@angular/core";
import { DxSankeyModule, DxSankeyComponent } from "devextreme-angular";
import exportMethods from "devextreme/viz/export";
// ...
export class AppComponent {
    @ViewChild("sankeyContainer1", { static: false }) sankey1: DxSankeyComponent;
    @ViewChild("sankeyContainer2", { static: false }) sankey2: DxSankeyComponent;
    // Prior to Angular 8
    // @ViewChild("sankeyContainer1") sankey1: DxSankeyComponent;
    // @ViewChild("sankeyContainer2") sankey2: DxSankeyComponent;
    exportSeveralSankeys() {
        let sankeyMarkup = exportMethods.getMarkup([this.sankey1.instance, this.sankey2.instance]);
        exportMethods.exportFromMarkup(sankeyMarkup, {
            height: 768,
            width: 1024,
            fileName: "exported_sankeys",
            format: "PDF"
        });
    };
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})
<dx-sankey id="sankeyContainer1" ... ></dx-sankey>
<dx-sankey id="sankeyContainer2" ... ></dx-sankey>
Vue
App.vue
<template> 
    <DxSankey ref="sankey1" />
    <DxSankey ref="sankey2" />
</template>

<script>
import DxSankey from 'devextreme-vue/sankey';
import exportMethods from 'devextreme/viz/export';

export default {
    components: {
        DxSankey
    },
    methods: {
        exportSeveralSankeys () {
            const sankey1 = this.$refs.sankey1.instance;
            const sankey2 = this.$refs.sankey2.instance;
            const sankeyMarkup = exportMethods.getMarkup([sankey1, sankey2]);
            exportMethods.exportFromMarkup(sankeyMarkup, {
                height: 768,
                width: 1024,
                fileName: "exported_sankeys",
                format: "PDF"
            });
        }
    }
}
</script>
React
App.js
import React from 'react';
import Sankey from 'devextreme-react/sankey';
import exportMethods from 'devextreme/viz/export';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.sankey1Ref = React.createRef();
        this.sankey2Ref = React.createRef();
    }
    render() {
        return (
            <Sankey ref={this.sankey1Ref} />
            <Sankey ref={this.sankey2Ref} />
        )
    }
    get sankey1() {
        return this.sankey1Ref.current.instance;
    }
    get sankey2() {
        return this.sankey2Ref.current.instance;
    }
    exportSeveralSankeys () {
        const sankeyMarkup = exportMethods.getMarkup([this.sankey1, this.sankey2]);
        exportMethods.exportFromMarkup(sankeyMarkup, {
            height: 768,
            width: 1024,
            fileName: "exported_sankeys",
            format: "PDF"
        });
    }
}

export default App;

Events

DevExtreme data visualization UI components raise the following exporting-related events:

  • exporting
    Allows you to request export 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 on the user's device.

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 properties when you configure the UI component.

jQuery
JavaScript
$(function() {
    $("#sankeyContainer").dxSankey({
        // ...
        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
HTML
TypeScript
<dx-sankey ...
    (onExporting)="onExporting($event)"
    (onExported)="onExported($event)"
    (onFileSaving)="onFileSaving($event)">
</dx-sankey>
import { DxSankeyModule } 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: [
        // ...
        DxSankeyModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxSankey
        @exporting="onExporting"
        @exported="onExported"
        @file-saving="onFileSaving"
    />
</template>

<script>
import DxSankey from 'devextreme-vue/sankey';

export default {
    components: {
        DxSankey
    },
    methods: {
        onExporting(e) {
            // Handler of the "exporting" event
        };
        onExported(e) {
            // Handler of the "exported" event
        };
        onFileSaving(e) {
            // Handler of the "fileSaving" event
        }
    }
}
</script>
React
App.js
import React from 'react';
import Sankey from 'devextreme-react/sankey';

class App extends React.Component {
    render() {
        return (
            <Sankey
                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.

JavaScript
var exportedHandler1 = function(e) {
    // First handler of the "exported" event
};

var exportedHandler2 = function(e) {
    // Second handler of the "exported" event
};

$("#sankeyContainer").dxSankey("instance")
    .on("exported", exportedHandler1)
    .on("exported", exportedHandler2);
See Also