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

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

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

Чтобы экспортировать компонент в 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. Если вам необходимо добавить возможность экспорта данных в офлайн режиме, следуйте указаниям:

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

  • переименуйте папку в "extras" и переместите её в необходимую директорию
  • укажите путь к локальному CDN репозиторию:
webix.env.cdn = "/local_folder";

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

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

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

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

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

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

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

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

  1. экспорт нескольких компонентов в один PDF документ
  2. произвольное имя файла
  3. пользовательские хедер, ширина или темплейт для данных указанного столбца
  4. отрисовка темплейтов в наборе данных виджета
  5. автоматическое определение ширины столбца
  6. ориентация PDF страницы
  7. показ какого-либо текста или исозбражения в хедере выходного файла
  8. возможность экспорта данных как изображений
  9. добавление текста до и после экпортируемого компонента
  10. кастомизация списка excelViewer

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

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

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

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

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

Related sample:  Export to PDF: Multiple Widgets

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

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

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

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

Related sample:  DataTable Export to PDF

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

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

webix.toPDF($$("mylist"), { fontName:"custom" });

Или же вы можете указать URL для шрифта через параметр fontURL:

webix.toPDF("$dt",{
      fontName:"name",
      fontURL:"url",
    })

Related sample:  Export to PDF: Changing Font

Обратите внимание, что поддерживаются файлы только с расширением .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
});

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

Вы можете выбрать ориентацию 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"
});

Related sample:  DataTable Export to PDF: Custom configuration

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

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

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

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

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

  • 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"
  ]
}}

Related sample:  Export to PDF: Custom Excel Viewer

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

Так как экспорт данных в 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").

Related sample:  Export to PDF with Custom Styles

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

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

  • хедер таблицы, у которого можно указать выравнивание текста, размер шрифта, цвет фона и текста:
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

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

Наверх