Чтобы экспортировать данные из компонента данных в файл PDF, вызовите метод toPDF. Метод принимает следующие параметры:
Например, если вы хотите экспортировать таблицу в файл PDF, вызовите метод toPDF() с ID таблицы в качестве параметра:
{
view:"datatable",
id: "myDataTable",
// конфигурация datatable
...
}
И затем, вызвать метод toPDF():
webix.toPDF("myDataTable");
Вы также можете экспортировать несколько Datatable или других компонентов передав массив ID:
webix.toPDF([ "datatable1", "datatable2" ]);
Related sample: DataTable Export to PDF
Метод toPDF() возвращает объект промиса. Промис разрешается с содержимым файла PDF, готовым для загрузки. Т.о. по необходимости вы можете получить доступ к необработанным данным экспортируемого файла:
webix.toPDF($$("myDataTable")).then(function(blob){
// логика обработки блоб
});
Например, вам может потребоваться отключить загрузку файлов и обрабатывать необработанные данные в соответствии с вашими потребностями.
Подробнее в отдельной статье.
Метод toPDF() возвращает все данные указанные в параметре columns компонента. Данные экспортируемые в PDF названы "data".
Тем не менее, вы можете изменить некоторые настройки по умолчанию.
Экспорт API позволяет
Вы можете экспортировать несколько документов передав массив их ID как первый параметр методу webix.toPDF(). Каждый компонент будет отображен на отдельной странице:
webix.toPDF(["datatable1", "datatable2"]);
Вы также можете определить специфические настройки для каждого компонента:
webix.toPDF([
{ id: "datatable1", options:{ filterHTML:true } },
{ id: "datatable2", options:{ /*...*/ } }
], filename: "custom");
Каждая настройка, заданная на уровне компонента, переопределяет общие настройки экпорта. Исключением являются настройки для самих документов, например: автоматическая ширина, футер/хедер, ориентация страницы, и т.п.
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}
}
});
Столбец будет отображен с установленными дополнительными свойствами, которые могут отличаться от параметров компонента.
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" (может быть использовано любое имя) получает данные из поля year даже если оно не отображено в таблице, но представлено в наборе данных. Поле отображается с width, template и header, которые будут в хедере соответствующего столбца экспортируемой таблицы.
webix.toPDF($$("myDataTable"), {
hidden:true
});
Скрытые столбцы/ряды будут видны в файле.
webix.toPDF($$("myDataTable"), {
autowidth:true
});
webix.toPDF($$("myDataTable"), {
orientation:"landscape"
});
// установить текст в хедере файла PDF
webix.toPDF($$("myDataTable"), {
docHeader:"This document was made with Webix library. http://webix.com"
});
// установить изображение в хедере файла PDF
webix.toPDF($$("myDataTable"), {
docHeaderImage:"../common/logo.jpg",
});
Установить порядок хедеров
По умолчанию в начале идет текстовый хедер (docHeader). Вы можете задать другой порядок хедеров с помощью атрибута order. Для этого укажите свойства docHeader и docHeaderImage как объект и установите атрибут order с числовым значением. Хедер с наибольшим значением займет верхнюю позицию:
// хедер с изображением будет сверху
webix.toPDF($$("table"), {
docHeader: {text:"The text header", order:1},
docHeaderImage: { url:"logo.jpg", order:0 }
});
webix.toPDF($$("table"), {
download:false
}).then(function(blob){
//обработка данных
});
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
Чтобы настроить хедер экспортированного документа PDF, вам нужно установить объект конфигурации как значение свойства docHeader. Внутри этого объекта кроме строки текста, укажите все нужные свойства, например выравнивание текста и цвет:
webix.toPDF($$("myDataTable"), {
docHeader:{
text: "Datatable with custom styling",
textAlign:"center",
color:0x663399
}
});
Цвет должен быть задан в формате HEX c префиксом 0x.
Подробнее о возможных свойствах объекта конфигурации.
API экспорта позволяет не только задавать ссылку на изображение, но и также указывать объект с нужными свойствами конфигурации изображения:
webix.toPDF($$("myDataTable"), {
docHeaderImage:{
url:"link",
align:"left", // "right"/"center"
width:300,
height:20
}
});
Т.о. вы можете настроить выравнивание изображения, ширину и высоту. Подробнее.
Также довольно легко настроить внешний вид итоговой таблицы с данными. Вы можете управлять внешним видом следующих компонентов:
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"
}
});
Related sample: DataTable Export to PDF: Extended Configuration
Наверх