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
To export a component into a PDF file, you need to call the toPDF method. The method takes the following parameters:
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 are exported into a PDF document with the "data" name.
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:
1. Download the package with CDN-files from https://github.com/webix-hub/cdn-extras.
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.
2. Rename the folder to "extras" and move it to the desired directory.
3. 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:
webix.env.cdn = "../../../../local_folder";
webix.env.cdn = "http://localhost/local_folder";
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:
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.
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
By default, Webix provides the pt-sans.regular.ttf and pt-sans.bold.ttf font files for export. If a font doesn't suit you, e.g. you need specific characters that are not included in the font, you can add another file(s) to the "extras" folder described above and define new font(s) via the fontName and boldFontName options correspondingly:
webix.toPDF($$("mylist"), {
// for regular font
fontName:"custom",
// for bold font
boldFontName: "customBold"
});
You can also specify the URL of the font(s) you need via the fontURL and boldFontURL parameters:
webix.toPDF("$dt",{
// for regular font
fontURL:"remote/font-regular",
// for bold font
boldFontURL: "remote/font-bold"
})
Related sample: Export to PDF: Changing Font
Note that only .ttf font files are supported.
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 }
}
});
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
}
});
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
});
By default hidden columns and rows are not included during export. You can include them by setting the hidden property to true:
webix.toPDF($$("datatable1"), {
hidden: true
});
In the exported PDF file the hidden columns/rows will be visible.
You can choose the PDF page orientation: portrait (default) or landscape:
webix.toPDF($$("mylist"), {
orientation:"landscape"
});
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 }
});
To customize a footer content, add the docFooter object into export configuration object and describe the desired styles as on the example below:
webix.toPDF($$("$datatable1"), {
docFooter:{
textAlign:"right",
color:0x663399,
},
// other settings
});
You can choose the display mode:
webix.toPDF("chart", { display:"image"});
webix.toPDF("list", { textBefore:"This is list", textAfter:"End of list" });
textAfter and textBefore accept strings and configuration objects with the following properties:
textBefore:{
text:"Population growth in Canada",
options:{ color:0x666666, textAlign:"center", fontSize:15 }
}
You can customize excelViewer list:
{id:"excel", options:{
sheets:[
{id:"Data", options:{textBefore:"check", styles:false}},
"Files"
]
}}
Related sample: Export to PDF: Custom Excel Viewer
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.
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).
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
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:
webix.toPDF($$("mylist"), {
header:{
textAlign:"center",
fontSize:13,
backgroundColor:0x3498DB,
color:0xFFFFFF
}
});
webix.toPDF($$("mylist"), {
table:{
textAlign:"center"
}
});
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