Виджеты Примеры Демо Форум Сервисы
Документация
СтартГайды

Экспорт данных и содержимого компонентов

Вы можете экспортировать компоненты в PNG, Excel, PDF, и CSV форматы.

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

Базовый экспорт

Компоненты не требуют какой-либо дополнительной конфигурации для экспорта. Чтобы экспортировать компонент в один из поддерживаемых форматов, вызовите соответствующий метод:

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

Возвращаем промис с данными

Методы для экспорта возвращают промисы с содержимым файла для скачивания. Поэтому при необходимости вы можете получить необработанные данные экспортируемого файла (blob объект). Например:

webix.toPNG($$("mylist")).then(function(blob){
    // логика для обработки blob
});

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

Общая кастомизация

У всех 4 методов для экспорта есть общие настройки кастомизации:

Как заблокировать скачивание файла

С помощью свойства download: false вы можете заблокировать возможность скачивания файла:

webix.toPNG($$("table"), {
   download:false
}).then(function(blob){
   // обработка данных
});

Игнорирование столбцов при экспорте

Чтобы исключить какие-либо столбцы из экспорта, определите свойство ignore как хэш для необходимых столбцов. Например:

webix.toCSV($$("table"), {
    ignore: { "votes":true, "rating":true }
});

Как убрать HTML тэги из ячеек

Работает для Excel, PDF, CSV

Вы можете исключить все HTML тэги из содержимого ячеек с помощью свойства filterHTML:

webix.toExcel($$("table"), {
    filterHTML:true
});

Как указать столбцы, которые хотите экспортировать

Работает для Excel, PDF, CSV

Существует два способа, с помощью которых вы можете указать произвольные столбцы для экспорта(зависит от того, важен ли вам порядок столбцов):

  • Для автоматического определения порядка задайте хэш с ID столбцов в качестве ключей. Значения могут быть или boolean для параметров по умолчанию (берутся из конфигурации компонента), или объекты с пользовательскими параметрами. Представим, вы хотите импортировать следующие столбцы:
webix.toCSV($$("table"), {
    columns:{
        "rank":true,
        "title":{ header:"Title", width:250 },
        "2016":{ header:"Votes in 2016" },
        "2015":{ header:"Votes in 2015" }
    }
});

Порядок в выходном файле будет такой: "2015", "2016", "rank", "title", т.к. сначала обрабатываются числа в восходящем направлении. Может быть, это не то, что вы ожидали.

  • Для строгого порядке в выходном файле укажите столбцы как простой массив:
webix.toCSV($$("table"), {
    columns:[
        { id:"rank" },
        { id:"title", header:"Title", width:250 },
        { id:"2016", header:"Votes in 2016" },
        { id:"2015", header:"Votes in 2015" }
    ]
});

Обратите внимание, что если вы хотите получить исходные параметры столбца, вам нужно указать только ID этого столбца (смотрите столбец "rank").

Как добавить дополнительные поля в экспорт

Работает для Excel, PDF, CSV

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

webix.toPDF($$("mylist"), {
    columns:{
        Custom1:{
            template:function(obj){
                return "Year " + obj.year;
            },
            width:50,
            header:"Year"
        },
        // другие столбцы
        title:true
    }
});

"Custom1" (можно использовать любое имя) получает данные из поля year, даже если поля не видно в компоненте, но он присутствует в данных. У нового столбца будут width, template, и header.

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

Работает для Excel, PDF, CSV форматов.

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

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

При экспорте данных в excel формат, скрытые столбцы/ряды будут изначально скрыты в файле. Пользователи могут отобразить их с помощью соответствующих контролов в таблице.

При экспорте в PDF или CSV форматы скрытые столбцы/ряды будут видны в файле.

Фильтрация данных перед экспортом

Работает для Excel, PDF, CSV

Чтобы отфильтровать данные для экспорта, определите функцию filter, которая должна возвращать данные для экспорта:

webix.toCSV($$("data"), {
    filter:function(obj){
        var found = sel.find(function(item){
            return item.id == obj.id;
        });
        return found;
    }
});

Related sample:  Specifying Data Items for Export

Модификации данных экспортируемых элементов

Работает для Excel, PDF, CSV

Вы можете менять данные для экспорта с помощью ключа $export поля data scheme:

webix.ui({
    view:"list",
    id:"mylist",
    scheme:{
        $export:function(obj){
            return { value:obj.value, date:webix.i18n.parseFormatStr(obj.date) };
        }
    }
});
 
webix.toExcel($$("mylist"));

Related sample:  Changing Item Data in Export

Кастомизация экспорта CSV для компонентов с иерархическими данными

Работает для Excel, PDF, CSV

Вы можете кастомизировать выходные данные иерархических компонентов (Tree и Treetable) следующим образом:

  • дефисы перед дочерними узлами можно не отрисовывать. Используйте свойство plainOutput со значением true
webix.toCSV($$("mytreetable"), {
    plainOutput:true
});
  • отрисовка отдельных столбцов для данных разныху ровней:
webix.toCSV($$("mytreetable"), {
    flatTree:{
        id:"value",
        columns:[
            { header:"Title" },
            { header:"Section" },
            { header:"Subsection" }
        ]
    }
});

Свойство flatTree включает в себя следующие параметры:

  • id (string) - данные для отрисовки в столбце
  • columns (array) - массив со столбцами, к которым применится описанное выше свойство данных в соответствии с уровнем
  • fill (boolean, необязательно) - если true, позволяет заполнять дочерние элементы данными родителя

Related sample:  Export to PDF, Excel

Экспорт в разные форматы

 Наверх
© XB Software Ltd
2013-2023