Data Components Export to PDF

You can export Webix data components to a PDF file. The components do not require any special configuration to be exported.

Export 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 PDF file, you need to call the toPDF method. The method takes the following parameters:

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

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

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

Related sample:  DataTable Export to PDF

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

Exporting Data Offline

The dependencies that are used for providing export possibilities are taken from the Webix CDN online catalog. If you need to implement data export offline, follow these steps:

If you use Webix version 6.2 or later, use the html2canvas-1.0.min.js file.
In case of a version earlier than 6.2, choose the html2canvas.min.js file.

  • rename the folder to "extras" and move it to the desired directory
  • set the path to the local CDN repository as:
webix.env.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 as:

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

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

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

Customizing Export

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

Export API allows

  1. export several components into one PDF document
  2. providing a custom filename
  3. defining custom header, width or template for data in the specified column
  4. rendering a template set in the widget's dataset
  5. defining the columns' width automatically
  6. defining the PDF page orientation
  7. displaying some text or image in the header of the export file
  8. setting export display mode to export data as images
  9. adding text after and before the exported view

Export several components into one PDF document

You can export multiple components by providing an array of IDs as a first parameter of webix.toPDF(). Each component will be rendered on a separate page:

webix.toPDF(["datatable", "chart"]);

You can also define a set of specific options for each component:

webix.toPDF([
    { id: "datatable", options:{ filterHTML:true } },
    { id: "chart", options:{ display:"image"} }
], { filename: "custom" });

Related sample:  Export to PDF: Multiple Widgets

Note that any options set on the view level override the options set for all exported views. The exceptions are the settings for the documents itself, e.g. autowidth, the footer / header, page orientation, etc.

Providing a custom filename

The default name of the output file is "Data.pdf". To set a different name, use the filename parameter:

webix.toPDF($$("table"), {
    filename: "datatable"
});

Related sample:  DataTable Export to PDF

Changing Font for Exported File

By default, Webix provides the pt-sans.regular.ttf font file for export. If it doesn't suit you, e.g. you need specific characters that are not included in the font, you can add another file to the "extras" folder described above and define the fontName option:

webix.toPDF($$("mylist"), { fontName:"custom" });

Note that only .ttf font files are supported.

Defining custom parameters

You can define custom parameters, such as header, width, template or format for data in the specified column:

webix.toPDF($$("mylist"), {
    columns:{
        title:{ header: "My title", width: 200, template: webix.template("#id#.#title#") },
        year:{ header:"Year", width:150 }
    }
});

Rendering a template set in the dataset

You can render templates instead of the actual values from the 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
    }
});

Defining the column width automatically

By default, the paper size of a PDF document is A4. If you set the autowidth property to true, columns will be able to have any possible width that will define the width of a PDF page.

webix.toPDF($$("mylist"), {
    autowidth:true
});

Setting the orientation parameter

You can choose the PDF page orientation: portrait (default) or landscape:

webix.toPDF($$("mylist"), {
    orientation:"landscape"
});

Displaying text or images in the header

Specifying the docHeader and docHeaderImage parameters to display text or an image in the header of the export file:

// setting a custom text in the header of the PDF file
webix.toPDF($$("mylist"), {
    docHeader:"This document was made with Webix library. https://webix.com"
});
 
// setting a custom image in the header of the PDF file
webix.toPDF($$("mylist"), {
    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($$("mylist"), {
    docHeader: { text:"The text header", order:1 },
    docHeaderImage: { url:"logo.jpg", order:0 }
});

Setting export display mode to export data as images

You can choose the display mode:

  • table (default, export a table with data)
  • image (screenshot, export widget visual representation)
  • all (both)
webix.toPDF("chart", { display:"image"});

Related sample:  Export to PDF

Adding text after and before the exported view

webix.toPDF("list", { textBefore:"This is list", textAfter:"End of list" });

textAfter and textBefore accept strings and configuration objects with the following properties:

  • text - the text,
  • options - styling options for the text (e.g. color, text alignment, font size), e.g.:
textBefore:{
    text:"Population growth in Canada",
    options:{ color:0x666666, textAlign:"center", fontSize:15 }
}

Styling the exported data

Since data export to PDF is implemented with the help of the third-party library, you can tune the appearance of elements in the exported PDF document using properties described in its documentation.

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 besides the text string specify all the needed properties, e.g. define the text alignment and color.

An example config may look as:

webix.toPDF($$("mylist"), {
    docHeader:{
        text: "List 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($$("mylist"), {
    docHeaderImage:{
        url:"link",
        align:"left", // "right"/"center"
        width:300,
        height:20
    }
});

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

Related sample:  Export to PDF with Custom Styles

Configuring the table

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

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

Related sample:  Export to PDF with Custom Styles

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

Back to top