Exporting Content and Data

You can export components to PNG, Excel, PDF, and CSV formats.

Basic Export

Components do not require any special configuration to be exported. To export a component to one of the supported formats, call the related method, e.g.:

webix.ui({
    view:"list",
    id: "mylist",
    // list configuration
});
 
webix.toExcel($$("mylist"));

Returning a promise with data

The export methods return promise objects. The promise is resolved with the contents of a file which is ready for downloading. So, if needed, you can access the raw data of the exported file (a blob object). For example:

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.

General Customization Settings

All four export methods have some customization settings in common:

1. disabling file download in a browser
2. ignoring some columns during export
3. stripping HTML tags from cells (Excel, PDF, CSV)
4. setting custom columns for export
5. including extra fields into export
6. outputting certain data from a data set
7. modifying data of exported items
8. customizing export to CSV for hierarchical components

Disabling file download

You can disable the download of a file via the download property set to false:

webix.toPNG($$("table"), {
   download:false
}).then(function(blob){
   //process raw data
});

Ignoring particular datatable columns during export

You can omit some columns from export. Pass the ignore property as a hash of column that must be ignored. For example:

webix.toCSV($$("table"), {
    ignore: { "votes":true, "rating":true }
});

Stripping HTML tags from cells

You can strip all HTML tags from the cell contents with the filterHTML setting:

webix.toExcel($$("table"), {
    filterHTML:true
});

Setting columns you'd like to see in the export file

There are two ways to set the custom columns for export, depending on whether the order of columns is important to you.

1. For an automatic column order, provide a hash with column IDs as keys. The values can be either boolean for default parameters (taken from component configuration) or objects with custom parameters. E.g. if you want to export these columns:

webix.toCSV($$("table"), {
    columns:{
        "rank":true,
        "title":{ header:"Title", width:250 },
        "2016":{ header:"Votes in 2016" },
        "2015":{ header:"Votes in 2015" }
    }
});

The order in the export file will be: "2015", "2016", "rank", "title" since numbers are processed first and come in the ascending order, which probably is not what you expected.

2. For a strict column order in the output file, specify the columns as a plain array:

webix.toCSV($$("table"), {
    columns:[
        { id:"rank" },
        { id:"title", header:"Title", width:250 },
        { id:"2016", header:"Votes in 2016" },
        { id:"2015", header:"Votes in 2015" }
    ]
});

Note that if you want to get the default column's parameters in this case, you should specify only the column's id (see the "rank" column).

Including extra fields into export

You can include extra fields into export by forming them within the export function:

webix.toPDF($$("mylist"), {
    columns:{
        Custom1:{
            template:function(obj){
                return "Year " + obj.year;
            },
            width:50,
            header:"Year"
        },
        //other columns
        title:true
    }
});

"Custom1" (any name can be used) receives the data from the year field even if it is not seen in this component but is presented in its dataset. The newly created column will have width, template, and header.

Filtering data for export

To filter data for export, define the filter function that must return the data that should be exported:

webix.toCSV($$("data"), {
    filter:function(obj){
        var found = sel.find(function(item){
            return item.id == obj.id;
        });
        return found;
    }
});

Related sample:  Specifying Data Items for Export

Modifying data of exported items

You can change data for export with the help of the $export key of the data scheme:

webix.ui({
    view:"list",
    id:"mylist",
    scheme:{
        $export:function(obj){
            return { value:obj.value, date:webix.i18n.parseFormatStr(obj.date) };
        }
    }
});
 
webix.toExcel($$("mylist"));

Related sample:  Changing Item Data in Export

Customizing Export to CSV for Hierarchical Components

You can customize the output data of hierarchical components (Tree and Treetable) in the following way:

• not rendering "hyphens" before child nodes in tree-like structures by using the plainOutput option with the true value

webix.toCSV($$("mytreetable"), {
    plainOutput:true
});

• rendering separate columns for data on different hierarchy levels, thus rendering data in a table:

webix.toCSV($$("mytreetable"), {
    flatTree:{
        id:"value",
        columns:[
            { header:"Title" },
            { header:"Section" },
            { header:"Subsection" }
        ]
    }
});

The flatTree property object includes the following options:

• id (string) - the data property that will be rendered in columns
• columns (array) - the array with columns, to which the above data property will be distributed according to the hierarchy level
• fill (boolean, optional) - if true, allows filling child records with parent data for each child node

Related sample:  Export to PDF, Excel

Customizing Export Details

• Components Export to PNG
• Data Components Export to Excel
• Data Components Export to PDF
• Data Components Export to CSV

Back to top