Экспорт в PDF

Чтобы экспортировать данные из компонента данных в файл PDF, вызовите метод toPDF. Метод принимает следующие параметры:

  • id - (string, object, array) ID или объект экспортируемого компонента
  • config - (object) необязательный параметр, опции конфигурации

Например, если вы хотите экспортировать таблицу в файл 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){
    // логика обработки блоб
});

Например, вам может потребоваться отключить загрузку файлов и обрабатывать необработанные данные в соответствии с вашими потребностями.

Экспорт офлайн

Подробнее в отдельной статье.

Настройка экспорта в PDF

Метод toPDF() возвращает все данные указанные в параметре columns компонента. Данные экспортируемые в PDF названы "data".

Тем не менее, вы можете изменить некоторые настройки по умолчанию.

Экспорт API позволяет

  1. экспортировать несколько компонентов в один документ PDF
  2. задать другое имя для файла
  3. отключить загрузку файла в браузере
  4. определять ориентацию страницы PDF
  5. убирать теги HTML из ячеек
  6. задать другие столбцы для экспорта
  7. задавать хедер, ширину или темплейт для данных в определенном столбце
  8. отображать темплейт заданный в наборе данных
  9. включая дополнительные поля в экспорт
  10. автоматически определять ширину столбца
  11. отображать текст или изображение в хедере экспортируемого файла
  12. проигнорировать определенный столбцы во время экспорта
  13. вывести определенные данные из набора данных
  14. изменять данные экспортируемых документов
  15. опускать хедер или футер таблицы во время экспорта
  16. включить стили ячеек из хедера и таблицы Datatable
  • экспортировать несколько компонентов в один документ PDF:

Вы можете экспортировать несколько документов передав массив их ID как первый параметр методу webix.toPDF(). Каждый компонент будет отображен на отдельной странице:

webix.toPDF(["datatable1", "datatable2"]);

Вы также можете определить специфические настройки для каждого компонента:

webix.toPDF([
    { id: "datatable1", options:{ filterHTML:true } },
    { id: "datatable2", options:{ /*...*/ } }
], filename: "custom");

Related sample:  

Каждая настройка, заданная на уровне компонента, переопределяет общие настройки экпорта. Исключением являются настройки для самих документов, например: автоматическая ширина, футер/хедер, ориентация страницы, и т.п.

  • задать другое имя для файла: (по умолчанию data)
webix.toPDF($$("myDataTable"), {
    filename:"datatable"
});

Related sample:  DataTable Export to PDF

  • убрать теги HTML из ячеек:
webix.toPDF($$("myDataTable"), {
    filterHTML:true
});
  • определить столбцы, которые вы бы хотели увидеть в экспортируемом файле
webix.toPDF($$("myDataTable"), {
    columns:{
        "rank":true,
        "title":true
    }
});
  • определить пользовательские параметры, такие как header, width или template для данных определенного столбца:
webix.toPDF($$("myDataTable"), {
    columns:{
        title:{ header: "My title", width: 200, template: webix.template("#id#.#title#")},
        year:{ header:"Year", width:150}
    }
});

Столбец будет отображен с установленными дополнительными свойствами, которые могут отличаться от параметров компонента.

  • отображать темплейт, заданный в наборе данных, с помощью настройки rawValues:false:
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, которые будут в хедере соответствующего столбца экспортируемой таблицы.

  • задать параметр autowidth, для автоматического определения ширины столбца. По умолчанию размер документа PDF - A4. Если вы установите значение true свойству autowidth, столбцы будут иметь любую возможную ширину, которая будет определять ширину страницы PDF
webix.toPDF($$("myDataTable"), {
    autowidth:true
});
  • установить параметр orientation, который определяет ориаентацию страницы PDF: portrait (по умолчанию) или landscape
webix.toPDF($$("myDataTable"), {
    orientation:"landscape"
});
  • установить параметр docHeader и docHeaderImage, чтобы отобразить текст или изображение в хедере экспортируемого файла
// установить текст в хедере файла 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 }
});
  • отключить загрузку файла в браузере с помощью настройки download:false:
webix.toPDF($$("table"), {
   download:false
}).then(function(blob){
   //обработка данных
});
  • проигнорировать определенный столбцы во время экспорта с помощью свойства ignore. Задайте его значение как объект со списком имен столбцов, которые должны быть проигнорированы. Например:
webix.toPDF($$("table"), {
    ignore: { "votes":true, "rating":true }
});
  • вывести определенные данные из набора данных таблицы с помощью свойства filter. Значение свойства может задано как функция, которая возвращает данные, которые должны быть экспортированы:
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

  • опустить хедер или футер таблицы во время экспорта Для этого используйте свойства header/footer со значением false:
webix.toPDF($$("table"), {
   header:false,
   footer:false
});
  • включить стили ячеек из хедера и таблицы Datatable в экспорт:
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

Наверх
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.