Export to PDF

To export data from a data component into a PDF file, you need to call the toPDF method. The method takes the next parameters:

  • id - (string, object) id or object of the exported view
  • config - (object) optional, configuration options

For example, if you want to export a datatable to a PDF file, you need to call the toPDF() method with the datatable id as a parameter:

{
    view:"datatable",
    id: "myDataTable",
    // datatable configuration
    ...
}

And then the call of the toPDF() method should follow.

webix.toPDF($$("myDataTable"));

Related sample:  DataTable Export to PDF

Customizing Export to PDF

Customizing export data

The toPDF() method returns all data specified in the columns parameter of a datatable view. The data is exported into a PDF document with the "data" name.

However, you may need to get some particular data or customize file properties.

Export API allows

  1. stripping HTML tags from the cells
  2. setting custom columns for export
  3. defining custom header, width or template for data in the specified column
  4. including extra fields into export
  5. rendering a template set in the widget's dataset
  6. disabling file download in a browser
  7. ignoring particular columns
  8. omitting the header or footer of Datatable during export
  • stripping HTML tags from the cells:
webix.toPDF($$("myDataTable"), {
     filterHTML:true
});
  • setting columns you'd like to see in the export file
webix.toPDF($$("myDataTable"), {
    columns:{
        "rank":true,
        "title":true
    }
});
  • defining custom parameters, such as header, width or template for data in the specified column:
webix.toPDF($$("myDataTable"), {
  columns:{
    title:{ header: "My title", width: 200, template: webix.template("#id#.#title#")},
    year:{ header:"Year", width:150}
  }
});

The column will be rendered with the stated additional properties, which may differ from the component's parameters.

  • including extra fields into export by forming them right within the export function:
webix.toPDF($$("myDataTable"), { 
    columns:{ 
        Custom1:{
            template:function(obj){
                return "Year " + obj.year;
            },
            width:50,
            header:"Year"
        },
        //other columns
        title:true
    }
});

"Custom1" (any name can be used) receives data from the year field even if it is not seen in this component but is presented in its dataset. The field is rendered with width and template as well as header that will be the header of the corresponding column in the resulting table.

  • rendering a template set in the widget's dataset via setting the rawValues option to false:
webix.ui({
  rows:[
    { 
      view:"datatable", 
      data:grid_data, 
      columns:[{id:"title", fillspace:true, template:"Film #title#"}]
    }
  ]
});
 
webix.toPDF($$("$datatable1"),{
    columns:{
        rawValues:false
    }
});
  • disabling file download in a browser if necessary, via the download property set to false:
webix.toPDF($$("table"), {
   download:false
}).then(function(blob){
   //process raw data
});
  • ignoring 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.toPDF($$("table"), {
    ignore: { "votes":true, "rating":true }
});
  • omitting the header or footer of a datatable during the export. For this you need to use the header/footer option and set it to false:
webix.toPDF($$("table"), {
   header:false,
   footer:false
});

Customizing exported document

Export API allows

  1. providing a custom filename
  2. defining the columns' width automatically
  3. defining the PDF page orientation
  4. displaying some text or image in the header of the export file
  • providing a custom filename: (it's data by default)
webix.toPDF($$("myDataTable"), {
    filename:"datatable"
});

Related sample:  DataTable Export to PDF

  • specifying the autowidth parameter to define the columns' width automatically. By default, the paper size of a PDF document is A4. If you set the autowidth property to true, the columns will be able to have any possible width that will define the width of a PDF page
webix.toPDF($$("myDataTable"), {
    autowidth:true
});
  • setting the orientation parameter which defines the PDF page orientation: portrait (default) or landscape
webix.toPDF($$("myDataTable"), {
    orientation:"landscape"
});
  • specifying the docHeader and docHeaderImage parameters to display some text or image in the header of the export file
// setting a custom text in the header of the PDF file
webix.toPDF($$("myDataTable"), {
    docHeader:"This document was made with Webix library. http://webix.com"
});
 
// setting a custom image in the header of the PDF file
webix.toPDF($$("myDataTable"), {
    docHeaderImage:"../common/logo.jpg",
});

Related sample:  DataTable Export to PDF: Custom configuration

Setting the headers order

By default the text header (docHeader) goes first. You can define a different order of headers with the help of the order attribute. For this, you need to specify docHeader and docHeaderImage properties as objects and set the order attribute with the number value. The header with the larger value will take the top position:

// the image header will be on top
webix.toPDF($$("table"), {
    docHeader: {text:"The text header", order:1},
    docHeaderImage: { url:"logo.jpg", order:0 }
});

Styling the exported data

You can tune the appearance of elements in the exported PDF document.

Configuring the document's header

To configure the header of the exported PDF document, you can set a configuration object as a value of the docHeader property. Inside this object beside the text string specify all the needed properties, e.g. define the text alignment and color.

An example config may look as:

webix.toPDF($$("myDataTable"), {
    docHeader:{
        text: "Datatable with custom styling",
        textAlign:"center",
        color:0x663399
    }
});

Pay attention that the color should be set in hex format starting from the 0x prefix.

There are many other possible properties of the config object. You can look all them up in the corresponding documentation (follow the "document/headeropts" section).

Configuring the header image

The export API allows you not only to set the link to the image, but also to specify an object with the necessary configuration properties of the image:

webix.toPDF($$("myDataTable"), {
    docHeaderImage:{ 
        url:"link", 
        align:"left", // "right"/"center"
        width:300, 
        height:20 
    }
});

Thus, you can configure the image's alignment, as well as its width and the height. More options are enumerated in the specific documentation (see the "document/imageimg-opts" section).

Configuring the document's table

It's also quite easy to configure the look of the resulting table with data. You can manage the appearance of the following component's elements to get the desired result:

  • the table's header, e.g. set text alignment, the font size, the background color and the color of the text:
webix.toPDF($$("myDataTable"), {
    header:{
        textAlign:"center",
        fontSize:13,
        backgroundColor:0x3498DB,
        color:0xFFFFFF
    }
});
  • the table itself, e.g. align the text in it:
webix.toPDF($$("myDataTable"), {
    table:{
        textAlign:"center"
    }
});
  • the table's footer, e.g. by specifying the font size, its height and text alignment:
webix.toPDF($$("myDataTable"), {
    footer:{
        fontSize:9,
        height:20,
        textAlign:"right"
    }
});

More possible configuration properties are described in the corresponding documentation (follow the "document/tableopts" section)

Related sample:  DataTable Export to PDF: extended configuration

Back to top
If you have not checked yet, be sure to visit site of our main product Webix javascript dashboard framework and page of javascript datagrid product.