Widget Export

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

Deploy a Server

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

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

  • Download the zip-archive with the version 1.9.X of PhantomJS and unpack it. Name the folder PhantomJS.

  • Add the Exporter folder from your DevExtreme package 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 the server logic. This script is supplied by DevExtreme. It is followed by the IP address that is assigned to your server and the number of the port that will be used for listening. Since the requests will be sent and received on the same machine in this example, the IP address corresponding to localhost is used. If the command line responds with the "OK, PhantomJS is ready." message, the server is deployed successfully.

NOTE
It is necessary for the phantomjs.exe process to operate on the server during export. Therefore, do not close the PhantomJS console window until you have finished exporting your widget.

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 it is 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. In the code below, the widget is created using the jQuery approach.

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

If you run your page, you will see the Exporter Icon ChartJS and Exporter Icon ChartJS icons on it. But exporting and printing do not work yet, because the dxExporter widget is not tuned properly. Refer to the next step to tune it.

Tune dxExporter

To ensure proper operation by the dxExporter, several options should be specified.

  • Assign a jQuery selector to the sourceContainer option. This selector should specify the div element that contains the widget you wish to export.

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

  • Additionally you can alter the default file name using the fileName option, change the set of available formats using the exportFormat option and enable/disable the entire export menu or only the printing button using the showMenu and printingEnabled options.

Now everything is ready for you to try the dxExporter widget. Hover over the Exporter Icon ChartJS 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 ChartJS icon.

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