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

Вы можете экспортировать компоненты данных Webix в Excel формате. Для следующих компонентов существуют некоторые особенности:

• SpreadSheet
• DataTable
• Excel Viewer

Чтобы экспортировать данные из компонента в Excel документ, вам необходимо вызвать метод toExcel, который принимает 2 параметра:

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

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

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

Метод toExcel возвращает все данные, указанные в серии данных компонента или в параметре columns компонента *DataTable*. Данные экспортируются в Excel документ с именем "Data" и листом "Data".

Related sample:  Export to Excel

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

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

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

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

webix.env.cdn = "/local_folder";

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

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

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

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

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

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

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

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

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

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

Вы можете изменить имена файла и листа по умолчанию:

webix.toExcel($$("table"), {
    filename: "table", // имя для файла
    name: "Films" // имя для листа
});

Related sample:  Export to Excel

Экспорт множественных листов в Excel

Если у вас на странице несколько компонентов данных, например в multiview, вы можете экспоритровать их данные в отдельные листы Excel файла. Что можно кастомизировать:

• экспорт всех данных компонентов или некоторых из них
• указать произвольные имена для листов или оставить имена по умолчанию

// экспорт всех компонентов с указанием произвольных имён
webix.toExcel(
  [{id:"table", options: {name:"Big data"}},
   {id:"list", options: {name:"Small data"}},
   {id:"chart", options: {name:"Chart data"}}], 
  {
    filename:"My data"
  }
);
 
 
// экспорт отдельных компонентов с имена листов по умолчанию
webix.toExcel(
    [$$("table"), $$("list")],
    { filename: "My data" }
);

Related sample:  Export to Excel: Multiple sheets

Как задать параметры для данных в указанном столбце

Вы можете определить следующие параметры: header, width, и template. Например:

webix.toExcel($$("mylist"), {
    columns:{
       "title":{ header:"Title", width:200, template:webix.template("#id#.#name#") },
       "year":{ header:"Year", width:100 }
    }
});

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

Как отрисовать необработанные данные

Вы можете отрисовывать необработанные значения из серии данных компонента, указав параметру rawValues значение true:

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

По умолчанию параметр rawValues имеет значение false и отрисовывается тот темплейт, который указан в наборе данных.

Как включить диапазон столбцов/рядов в экспорт

Если в таблице есть диапазоны столбцов или рядов, вы можете включить их в экспорт с помощью параметра spans:

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

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

Вы можете включить скрытые столбцы DataTable, TreeTable, Spreadsheet в экспортируемый файл, выставив свойству hidden значение true:

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

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

Как указать тип данных и формат для экспортируемых дат и чисел

Вы можете указать тип данных и формат для дат и чисел в каком-либо столбце с помощью свойств exportType и exportFormat. Возможные значения:

• для параметра exportType: "number", "string", "boolean", "date"
• для параметра exportFormat: форматы, поддерживаемые библиотекой SheetJS, например, "d-mmm-yy", "#,##0.00" и др. Т.к. данные в столбцах можно форматировать заранее, будет не лишним добавить параметр rawValues:true в настройки экспорта, чтобы предупредить конфликты с форматированием Webix.

webix.toExcel($$("table"), {
    rawValues:true,
    columns:[
        { id:"year",  header:"Released", exportType:"date",   exportFormat:"d-mmm-yy"},
        { id:"votes", header:"Votes",    exportType:"number", exportFormat:"#,##0.00"}
    ]
});

Related sample:  Export to Excel: Setting format

Поведение пустых ячеек при экспорте

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

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

Related sample:  Datatable: Stub Empty Cells during Export to Excel

Наверх