Exporter

The dxExporter widget allows you to export your chart, gauge or any other DevExtreme data visualization widget into an image or a document. The dxExporter works in conjunction with other widgets and should not be used separately.

Included in: dx.chartjs.js, dx.all.js
Type:

Object

To operate, dxExporter requires the PhantomJS WebKit version 1.9.X, which allows you to use the client-server model where PhantomJS performs as a server. Refer to the Deploy a Server topic for details on how to setup your server.

When your server is ready, add dxExporter onto your page.

You can add the widget using one of the following approaches.

  • jQuery
    Use the dxExporter jQuery plug-in.

    HTML
    <div id="exportMenu"></div>
    JavaScript
    $("#exportMenu").dxExporter();
  • Knockout
    Add a div element and apply the dxExporter binding to this element.

    HTML
    <div data-bind="dxExporter: {}"></div>
  • AngularJS
    Add a div element and apply the dx-exporter directive to this element.

    HTML
    <div dx-exporter="{}"></div>

Note that DevExtreme widgets require you to link the jQuery and Globalize libraries to your application. If you use the Knockout or AngularJS approach, the Knockout or AngularJS library is also required. For detailed information on how to link the needed libraries, refer to the Installation article.

NOTE
This widget does not support Internet Explorer 8.

Watch Video

Configuration

An object configuring options for the dxExport widget.

Name Description
exportFormat

Specifies a set of formats available for exporting into.

fileName

Specifies a name that should be assigned to the file with the exported widget.

onDisposing

A handler for the disposing event.

onInitialized

A handler for the initialized event.

onOptionChanged

A handler for the optionChanged event.

printingEnabled

Specifies whether or not to enable printing operation.

serverUrl

Specifies the URL of the server that supplies the exporting service.

showMenu

Specifies whether to show the export menu or not.

sourceContainer

Specifies a div container that holds the widget to be exported.

Methods

This section describes methods that can be used in code to manipulate the dxExporter widget.

Name Description
beginUpdate()

Prevents the component from refreshing until the endUpdate method is called.

endUpdate()

Enables the component to refresh after the beginUpdate method call.

exportTo(fileName, format)

Exports a DevExtreme data visualization widget into a file with a specified name and format.

instance()

Returns an instance of this component class.

off(eventName)

Detaches all event handlers from the specified event.

off(eventName, eventHandler)

Detaches a particular event handler from the specified event.

on(eventName, eventHandler)

Subscribes to a specified event.

on(events)

Subscribes to the specified events.

option()

Returns the configuration options of this component.

option(optionName)

Gets the value of the specified configuration option of the widget.

option(optionName, optionValue)

Sets a value to the specified configuration option of the widget.

option(options)

Sets one or more options of this component.

print()

Calls the browser's print window.

All the methods listed in this section should be called of the dxExporter widget's instance. To obtain it, use the following construction.

JavaScript
var exporter = $('#exporterContainer').dxExporter('instance');

Events

This section describes events fired by this widget.

Name Description
disposing

Fires when the widget is being removed.

initialized

Fires when the widget is initialized.

optionChanged

Fires after an option of the component is changed.