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

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

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

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

Если вы используете Webix версии 5.0 или позже - используйте файл xlsx.core.styles.min.js.
Для версий до 5.0 используйте xlsx.core.min.js.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы можете указать тип данных и формат для дат и чисел в каком-либо столбце с помощью свойств 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

Наверх