Components Export to PNG

You can export Webix components to the PNG format. The components don't require any special configuration to be exported.

The described functionality is available both in Standard and Pro versions, but pay attention that the IE browser is supported starting from version 10.

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
  • options - (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

Returning a promise with data

The toPNG() method returns a promise object. The promise is resolved with the contents of a PNG file which is ready for downloading. So, if needed, you can access raw data of the exported file (a blob object):

webix.toPNG($$("mylist")).then(function(blob){
    // the logic of processing the blob
});

For example, you may need to disable file download and process raw data according to your needs.

Exporting Data Offline

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

  • download the package with CDN-files from https://github.com/webix-hub/cdn-extras
  • rename the folder to "extras" and move it to the desired directory
  • set the path to the local CDN repository as in:
webix.cdn = "/local_folder";

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

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

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

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

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

Customizing Export to PNG

You can customize the default export settings in the following way:

  • disable file download if necessary, via the download property set to false:
webix.toPNG($$("table"), {
   download:false
}).then(function(blob){
   //process raw data
});
  • ignore particular columns during export via the ignore property. You need to set its value as an object with a list of columns' names to ignore. For example:
webix.toPNG($$("table"), {
    ignore: { "votes":true, "rating":true }
});
Back to top