To export data from a data 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 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");
You can also export several Datatables or other widgets by passing an array of IDs:
webix.toPDF([ "datatable1", "datatable2" ]);
Related sample: DataTable Export to PDF
The toPDF() method returns a promise object. The promise is resolved with the contents of a PDF file that is ready for downloading. So, if needed, you can access raw data of the exported file (a blob object):
webix.toPDF($$("myDataTable")).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.
For details on how to export Datatables offline, go to the main PDF Export article.
The toPDF() method returns all data specified in the columns parameter of a datatable view. The data are 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
You can export multiple Datatables by providing an array of IDs as a first parameter of webix.toPDF(). Each components will be rendered on a separate page:
webix.toPDF(["datatable1", "datatable2"]);
You can also define a set of specific options for each component:
webix.toPDF([
{ id: "datatable1", options:{ filterHTML:true } },
{ id: "datatable2", options:{ /*...*/ } }
], filename: "custom");
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.
webix.toPDF($$("myDataTable"), {
filename:"datatable"
});
Related sample: DataTable Export to PDF
webix.toPDF($$("myDataTable"), {
filterHTML:true
});
webix.toPDF($$("myDataTable"), {
columns:{
"rank":true,
"title":true
}
});
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 parameters.
webix.ui({
rows:[
{
view:"datatable",
data:grid_data,
columns:[{id:"title", fillspace:true, template:"Film #title#"}]
}
]
});
webix.toPDF($$("$datatable1"),{
columns:{
rawValues:false
}
});
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.
webix.toPDF($$("myDataTable"), {
hidden:true
});
The hidden columns/rows will be visible in the exported file.
webix.toPDF($$("myDataTable"), {
autowidth:true
});
webix.toPDF($$("myDataTable"), {
orientation:"landscape"
});
// 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",
});
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 }
});
webix.toPDF($$("table"), {
download:false
}).then(function(blob){
//process raw data
});
webix.toPDF($$("table"), {
ignore: { "votes":true, "rating":true }
});
webix.toPDF($$("data"), {
filter:function(obj){
var found = sel.find(function(item){
return item.id == obj.id;
});
return found;
}
});
webix.ui({
view:"datatable",
id:"mygrid",
scheme:{
$export:function(obj){
return { value:obj.value, date:webix.i18n.parseFormatStr(obj.date) };
}
}
});
webix.toPDF($$("grid"));
Related sample: Changing Item Data in Export
webix.toPDF($$("table"), {
header:false,
footer:false
});
webix.toPDF($$("table"), {
styles:true
});
Related sample: DataTable Export to PDF: Custom Configuration
Related sample: Specifying Data Items for Export
You can tune the appearance of elements in the exported PDF document.
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).
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 alignment of the image, as well as its width and the height. More options are enumerated in the specific documentation (see the "document/imageimg-opts" section).
It's also quite easy to configure the look of the resulting table with data. You can manage the appearance of the following component elements to get the desired result:
webix.toPDF($$("myDataTable"), {
header:{
textAlign:"center",
fontSize:13,
backgroundColor:0x3498DB,
color:0xFFFFFF
}
});
webix.toPDF($$("myDataTable"), {
table:{
textAlign:"center"
}
});
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