Экспорт компонентов данных в PDF

Вы можете экспортировать компоненты в формат PDF. Эта процедура не требует какой-либо дополнительной конфигурации компонентов.

Экспорт доступен как в стандартной, так и в pro версиях.

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

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

Например, если вы хотите экспортировать список в PDF файл, вам необходимо вызвать метод toPDF() с ID списка в качестве параметра:

webix.ui({
    view:"list",
    id: "mylist",
    // конфигурация списка
});
 
webix.toPDF("mylist");

Related sample: DataTable Export to PDF

Метод toPDF возвращает все данные, указанные в dataset компонента или в параметре columns у *datatable*. Данные экспортируются в PDF документ с именем "data".

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

Зависимости, которые используются при экспорте содержаться в онлайн каталоге Webix CDN. Если вам необходимо добавить возможность экспорта данных в офлайн режиме, следуйте указаниям:

1. Скачайте пакет с CDN-файлами с ресурса https://github.com/webix-hub/cdn-extras.

Если у вас Webix 6.2 версии и выше, используйте файл html2canvas-1.0.min.js.
Если же версия раньше, чем 6.2, вам нужен файл html2canvas.min.js.

2. Переименуйте папку в "extras" и переместите её в необходимую директорию.
3. Укажите путь к локальному CDN репозиторию:

webix.env.cdn = "/local_folder";

При указании пути необходимо обратить внимание на следующее:

если вы указываете путь относительно текущей страницы, он должен иметь следующий формат:

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

абсолютный путь к репозиторию выглядит следующим образом:

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

Кастомизация экспорта

Некоторые общие моменты кастомизации экспорта можно применять к методу toPDF. Однако также существуют специальные настройки, описанные ниже.

Какие есть возможности

экспорт нескольких компонентов в один PDF документ
произвольное имя файла
изменение шрифта экспортируемого файла
пользовательские хедер, ширина или темплейт для данных указанного столбца
отрисовка темплейтов в наборе данных виджета
автоматическое определение ширины столбца
ориентация PDF страницы
кастомизация футера экспортируемого файла
показ какого-либо текста или исозбражения в хедере выходного файла
возможность экспорта данных как изображений
добавление текста до и после экпортируемого компонента
кастомизация списка excelViewer
включение скрытых столбцов и рядов при экспорте

Экспорт нескольких компонентов в один PDF документ

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

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

Вы также можете указать набор определённых опций для каждого компонента:

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

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

Как указать произвольное имя файла

Имя выходного файла по умолчанию "Data.pdf". Чтобы указать другое имя, используйте параметр filename:

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

Related sample: DataTable Export to PDF

Как изменить шрифт экспортируемого фалйа

По умолчанию Webix используйте шрифт pt-sans.regular.ttf и pt-sans.bold.ttf. Если вы хотите задать другой, например с какими-либо нестандартными символами, добавьте необходимые файлы в папку "extras" (описан выше) и укажите опции fontName и/или boldFontName:

webix.toPDF($$("mylist"), { 
  // для обычного шрифта
  fontName:"custom",
  // для жирного шрифта
  boldFontName: "customBold"
});

Вы также можете указать URL к шрифтам через параметры fontURL и boldFontURL соответственно:

webix.toPDF("$dt",{
  // для обычного шрифта
  fontURL:"remote/font-regular",
  // для жирного шрифта
  boldFontURL: "remote/font-bold"
})

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

Пользовательские параметры

Вы можете определить свои параметры (header, width, template или format) для данных в указанном столбце:

webix.toPDF($$("mylist"), {
    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
    }
});

Автоматическое определение ширины столбца

По умолчанию размер PDF документа равен размеру листка формата А4. Если вы укажите свойству autowidth значение true, появится возможность задавать любую ширину, которая будет определять ширину PDF страницы.

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

Как включить скрытые столбцы и ряды в экспортируемый файл

По умолчанию скрытые столбцы и ряды не включены в экспортируемый файл. Вы можете включить их, указав свойству hidden значение true:

webix.toPDF($$("datatable1"), {
    hidden: true
});

В PDF файле скрытые столбцы/ряды будут видны.

Как указать ориентацию документа

Вы можете выбрать ориентацию PDF документа: portrait (по умолчанию) или landscape:

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

Текст или изображение в хедере

С помощью свойств docHeader и docHeaderImage вы можете показывать какие-либо текст или картинку в выходном файле:

// добавляем произвольный тест в хедер PDF файла
webix.toPDF($$("mylist"), {
    docHeader:"This document was made with Webix library. https://webix.com"
});
 
// добавляем изображение в хедер PDF файла
webix.toPDF($$("mylist"), {
    docHeaderImage:"../common/logo.jpg"
});

Определяем порядок хедеров

По умолчанию текстовый хедер (docHeader) идёт первым. Вы можете определить другой порядок хедеров с помощью параметра order. Для этого определите свойства docHeader и docHeaderImage как объекты и укажите параметр order с числовым значением. Хедер с наибольшим значением высшую позицию:

// текстовый хедер будет выше
webix.toPDF($$("mylist"), {
    docHeader: { text:"The text header", order:1 },
    docHeaderImage: { url:"logo.jpg", order:0 }
});

Кастомизация футера

Чтобы кастомизировать содержимое футера, добавьте объект docFooter в объект конфигурации экспорта и опишите необходимые стили, как на примере ниже:

webix.toPDF($$("$datatable1"), {
  docFooter:{
    textAlign:"right",
    color:0x663399,
  },
  // другие настройки
});

Режимы при экспорте данных как изображений

Существуют следующие режимы:

table (по умолчанию, экспорт таблицы с данными)
image (скриншот, экспорт визуальной составляющей компонента)
all (оба вышеперечисленных)

webix.toPDF("chart", { display:"image"});

Related sample: Export to PDF

Текст до и после экспортируемого компонента

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

textAfter и textBefore принимают строки и конфигурационные объекты со следующими свойствами:

text - текст,
options - стили для текста (цвет, выравнивание, размер):

textBefore:{
    text:"Population growth in Canada",
    options:{ color:0x666666, textAlign:"center", fontSize:15 }
}

Кастомизация списка excelViewer

Вы можете кастомизировать список excelViewer:

{id:"excel", options:{
  sheets:[
    {id:"Data", options:{textBefore:"check", styles:false}},
    "Files"
  ]
}}

Стилизация экспортируемых данных

Так как экспорт данных в PDF осуществляется с помощью сторонней библиотеки, вы можете настроить внешний вид элементов в выходном PDF файле, используя свойства, описанные в документации.

Настройка хедера документа

Чтобы настроить хедер экспортиремого PDF документа, вы можете указать конфигурационный объект в качестве значения свойства docHeader. Внутри этого объекта помимо текстовой строки укажите все необходимые свойства (выравнивание и цвет).

Например:

webix.toPDF($$("mylist"), {
    docHeader:{
        text: "List with custom styling",
        textAlign:"center",
        color:0x663399
    }
});

Обратите внимание, что цвет необходимо указывать в формате HEX, начиная с префикса 0x.

Суествуют и другие свойства конфигурационного объекта. Вы можете ознакомится с ними в соответствующей части документации (смотрите секцию "document/headeropts").

Настройка изображения хедера

API экспорта позволяет указывать не только ссылку на изображение, но также обработать объект с необходимым свойствами изображения:

webix.toPDF($$("mylist"), {
    docHeaderImage:{
        url:"link",
        align:"left", // "right"/"center"
        width:300,
        height:20
    }
});

Поэтому вы можете настроить выравнивание изображения, а также его ширину и высоту. Ещё больше опций вы найдёте в документации (смотрите секцию "document/imageimg-opts").

Настройка таблицы

Также достаточно просто настроить внешний вид выходной таблицы с данными. Вы можете работать с элементами, чтобы получить желаемый результат:

хедер таблицы, у которого можно указать выравнивание текста, размер шрифта, цвет фона и текста:

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"
    }
});

Ещё больше возможностей конфигурации описаны в соответствующем разделе (см. секцию "document/tableopts").

Наверх