Nov 21, 2013
Pavel Gruba

Widget for Export

Although DevExtreme data visualization widgets can be displayed in any browser on any platform, there are times when it is necessary to display a chart as an image. The dxExporter widget that comes with the latest DevExtreme Web version supplies you with this opportunity. This topic will guide you through both deploying a server for exporting and binding dxExporter to your widget.

Exporter Widget

The dxExporter widget can export any widget from the DevExtreme data visualization library into a PNG, PDF or SVG file. dxExporter requires the PhantomJS WebKit to function. This WebKit allows you to use the client-server model where PhantomJS performs as a server. In this topic, the dxExporter basics are explained in a simple example where a single computer is used both as a client and a server.

Deploy a Server

Start by deploying the server that will process requests by following the steps below.

  • Download the zip-archive with the latest version of PhantomJS and unpack it. Let it be a folder named PhantomJS.

  • Add the Exporter folder from the DevExtreme Web archive to the PhantomJS folder.

  • Open the system command line and specify the directory with the phantomjs.exe file as the current directory.

  • Type the following line.

    phantomjs Exporter/exporter-server.js 127.0.0.1 3003

    Here, Exporter/exporter-server.js refers to the script that implements server logic. This script is supplied by DevExtreme. It is followed by the IP address that is assigned to your server and a number of the port that will be used for listening. Since the requests will be sent and received on the same machine in our example, we use the IP address corresponding to localhost. If the command line has responded with the "OK, PhantomJS is ready." message, the server is deployed successfully and you can move on to the next step – embedding dxExporter into your page.

Embed dxExporter

To add dxExporter to your page, do the following.

  • Provide links to the exporter client script and one of the external stylesheets as shown below.

    HTML
    <link rel="stylesheet" type="text/css" href="dx.exporter.desktop.default.css">
    <!-- <link rel="stylesheet" type="text/css" href="dx.exporter.desktop.dark.css"> -->
    <script src="Exporter/dx.exporter.js"></script>
  • Add a div container for the dxExporter widget.

    HTML
    <div id='exportMenu'></div>
  • Create the dxExporter widget within this container using the jQuery, Knockout or AngularJS approach. The widget below is created using the jQuery approach.

    JavaScript
    $(function () {
        $("#exportMenu").dxExporter();
    });

Now, if you run your page, you will see the Exporter Icon DevExtreme and Exporter Icon DevExtreme icons on it. Since the dxExporter widget is not tuned properly, the exporting and printing icons are not functional yet. Refer to the next step to tune the widget.

Tune dxExporter

To ensure dxExporter's proper operation, several options should be specified.

  • Assign the id of the div container, which holds the widget that you want to export to the sourceContainerId option. This id should be preceded by the '#' symbol. For example, if the chart container has the 'chart' id, the '#chart' string should be assigned to the sourceContainerId option.

  • Specify the URL of your server using the serverUrl option. In our example, it is 'http://127.0.0.1:3003'.

  • Optionally, you can change the default file name using the fileName option.

The dxExporter widget is now fully set up. Hover over the Exporter Icon DevExtreme icon and choose the appropriate format to export your widget. In addition, you can change the print parameters within the Print window. To call this window, click the Exporter Icon DevExtreme icon.

As you can see, the dxExporter widget is very easy to use and allows you to present your chart even when scripts are disabled.