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

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

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

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

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

Например, если вы хотите экспортировать список в CSV документ, вам необходимо вызвать метод toCSV() с ID списка в качестве параметра:

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

Related sample:  Export to CSV

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

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

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

Возможности кастомизации:

  1. произвольное имя файла
  2. пользовательские хедер, ширина или темплейт для данных указанного столбца
  3. отрисовка темплейтов в наборе данных виджета
  4. определение произвольного разделителя для столбцов

Providing a custom filename

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

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

Как определить пользовательский хедер или темплейт для столбцов

При экспорте DataTable в CSV формат, вы можете указывать произвольные хедеры и темплейты для определённых столбцов:

webix.toCSV($$("table"), {
    columns:{
        "title":{ header: "Title", template: webix.template("#id#.#name#") },
        "year":{ header: "Year" }
    }
});

Темплейт для набора данных

Вы можете отрисовывать темплейты вместо исходных данных с помощью свойства rawValues: false:

webix.ui({
    rows:[
        {
            view:"datatable",
            data:grid_data,
            columns:[
                { id:"title", fillspace:true, template:"Film #title#" }
            ]
        }
    ]
});
 
webix.toCSV($$("$datatable1"),{
    columns:{
        rawValues:false
    }
});

Текст в хедере экспортируемого файла

Вы можете добавить текст в хедер выходного файла с помощью свойства docHeader:

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

Как указать разделитель

Чтобы определить разделитель для столбцов, используйте webix.csv.delimiter.cols:

webix.csv.delimiter.cols = ",";

Related sample:  Export to CSV

Наверх