User Interaction
To export or print the widget, 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.
Set export.enabled to true to enable exporting and printing. To allow a user to only export, assign false to export.printingEnabled.
jQuery
$(function() {
$("#sankeyContainer").dxSankey({
// ...
export: {
enabled: true,
printingEnabled: false
}
});
});Angular
<dx-sankey ... >
<dxo-export
[enabled]="true"
[printingEnabled]="false">
</dxo-export>
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxSankeyModule
],
// ...
})Change the export.formats array to limit the set of export formats. You can also set the fileName option to specify the export file's name.
jQuery
$(function() {
$("#sankeyContainer").dxSankey({
// ...
export: {
enabled: true,
formats: ["PNG", "JPEG"],
fileName: "exported_sankey"
}
});
});Angular
<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
],
// ...
})You should set up a server-side proxy to enable exporting and printing in Safari on MacOS.
API
To export the widget 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 widget. This command opens the browser's Print window.
jQuery
var sankey = $("#sankeyContainer").dxSankey("instance");
sankey.exportTo("exported_sankey", "PDF");
sankey.print();Angular
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
],
// ...
})You can also export several widgets simultaneously using their SVG markup. Call the DevExpress.viz.getMarkup(widgetInstances) method to collect the markup from all the required widgets and pass it to the DevExpress.viz.exportFromMarkup(markup, options) method.
jQuery
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
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>
Events
DevExtreme data visualization widgets 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 options when you configure the widget.
jQuery
$(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
<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
],
// ...
})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
};
$("#sankeyContainer").dxSankey("instance")
.on("exported", exportedHandler1)
.on("exported", exportedHandler2);See Also
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core