Components Export to PNG

You can export Webix components to the PNG format. The components do not require any special configuration to be exported.

Export is available both in Standard and Pro versions

To export a component into a PNG file, you need to call the toPNG method. The method takes the following parameters:

id - (string, object) the id or object of the exported view, or the id of any HTML element
config - (string,object) optional, a set of configuration options or the name of the created PNG file

For example, if you want to export a chart to a PNG file, you need to call the toPNG() method with the chart ID as a parameter:

webix.ui({
    view:"chart",
    id: "myChart",
    // chart configuration
});
 
webix.toPNG($$("myChart"));

Related sample: Export to PNG

Exporting Data Offline

The dependencies which are used for providing export possibilities are taken from the Webix CDN online catalog. If you need to implement data export offline, you should complete the following steps:

1. Download the package with CDN-files from https://github.com/webix-hub/cdn-extras.
2. Rename the folder to "extras" and move it to the desired directory.
3. Set the path to the local CDN repository as in:

webix.env.cdn = "/local_folder";

Note that specifying the path to the local CDN repository has some peculiarities:

in case you set the path relative to the current page, it should be specified like this:

webix.env.cdn = "../../../../local_folder";

the absolute path to the repository should be specified as follows:

webix.env.cdn = "http://localhost/local_folder";

Customizing Export to PNG

There are some common export customization settings that are also applicable to the toPNG method. There are also some specific settings described below.

set the output file name (the default name is Data.png):

webix.toPNG($$("table"), "somefile");
// or
webix.toPNG($$("table"), {
    filename:"somefile"
});