Экспорт в Excel

Чтобы экспортировать данные из DataTable/TreeTable в документ Excel, вызовите метод toExcel.

Метод принимает два параметра:

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

Например, чтобы экспортировать таблицу в документ Excel вам необходимо начать с инициализации компонента:

{
    view:"datatable",
    id: "myDatatable",
    // конфигурация datatable
    ...
}

И затем вызвать метод toExcel():

webix.toExcel($$("myDataTable"));

Related sample:  Export to Excel

Настройка экспорта

По умолчанию:

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

Вы можете изменить некоторые настройки по умолчанию.

Вы можете

  1. задать другие имена для файла и листа
  2. убрать теги HTML из ячеек
  3. задать другие столбцы для экспорта
  4. задать хедер, ширину или темплейт для данных в определенном столбце
  5. включить дополнительные поля
  6. отобразить необработанные значения или темплейты, заданные в наборе данных компонента
  7. включить объединения строк и столбцов из хедера и таблицы Datatable
  8. отключить загрузку файла в браузере
  9. проигнорировать определенные столбцы во время экспорта
  10. включить стили ячеек из хедера и таблицы Datatable
  11. экспортировать высоту строк
  12. опустить хедер или футер
  13. вывести определенные данные из набора данных
  14. указать желаемый тип данных и установить формат для экспортируемых дат и чисел

Ниже вы найдете подробное описание всех возможностей:

  • задать другие имена для файла и листа:
webix.toExcel($$("table"), {
    filename: "table", // for filename
    name: "Films" // for sheet name
});

Related sample:  Export to Excel

  • убрать теги HTML из ячеек:
webix.toExcel($$("table"), {
    filterHTML:true
});
  • определить столбцы, которые вы бы хотели увидеть в экспортируемом файле. Существует два способа задать столбцы для экспорта:

Вы можете задать объект с ID столбца в качестве ключей. Для параметров по умолчанию их значения могут быть булевыми (взятыми из конфигурации компонента) или объектом:

webix.toExcel($$("table"), {
    columns:{
        "rank":true,
        "title":{ header:"Title", width:250}
    }
});

При такой записи, порядок столбцов в итоговом файле определяется автоматически с помощью цикла for.. in. Иногда это может оказаться ненадежным, например:

webix.toExcel($$("table"), {
    columns:{
        "rank":true,
        "title":{ header:"Title", width:250},
        "2016":{ header:"Votes in 2016"},
        "2015":{ header:"Votes in 2015"}
    }
});

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

Чтобы установить строгий порядок столбцов укажите столбцы как массив:

webix.toExcel($$("table"), {
    columns:[
        { id:"rank" },
        { id:"title", header:"Title", width:250},
        { id:"2016", header:"Votes in 2016"},
        { id:"2015", header:"Votes in 2015"}
    ]
});

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

  • определить пользовательские параметры, такие как header, width или template для данных определенного столбца:
webix.toExcel($$("myDataTable"), {
    columns:{
        "title":{header: "Title", width: 200, template: webix.template("#id#.#name#")},
        "year":{header: "Year", width: 100}
    }
});

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

  • включить дополнительные поля в экспорт, формируя их прямо в функции экспорта:
webix.toExcel(datatable, {
    columns:{
        Custom1:{
            template:function(obj){
                return "Year " + obj.year;
            },
            width:50,
            header:"Year"
        },
        // еще столбцы
        title:true
    }
});

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

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

  • включить объединения строк и столбцов из хедера и тела Datatable (если есть) в экспорт:
webix.toExcel($$("table"), {
    spans:true
});

Будут экспортированы только объединения хедеров столбцов, т.к функциональность "Объединение строк и столбцов в DataTable" доступна только в версии PRO.

  • отключить загрузку файла в браузере с помощью настройки download:false:
webix.toExcel($$("table"), {
   download:false
}).then(function(blob){
   // обработка данных
});
  • проигнорировать определенный столбцы во время экспорта с помощью свойства ignore. Задайте его значение как объект со списком имен столбцов, которые должны быть проигнорированы. Например:
webix.toExcel($$("table"), {
    ignore: { "votes":true, "rating":true }
});
  • включить стили ячеек из хедера и тела Datatable в экспорт:
webix.toExcel($$("table"), {
    styles:true
});
  • экспортировать высоту строк. Эта настройка регулируется свойством heights, которое по умолчанию false и может принимать следующие значения:

    • true - экспортирует только настроенную высоту строк (отличается от rowHeight по умолчанию);
    • "all" - экспортирует настроенную высоту строк и высоту строк по умолчанию;
    • false - по умолчанию, высота строк не экспортируется.
webix.toExcel($$("table"), {
   heights:true
});

Если вы установите styles:true, настройка heights автоматически переключится на "all".

  • опустить хедер или футер таблицы во время экспорта. Для этого используйте свойства header/footer со значением false:
webix.toExcel($$("table"), {
   header:false,
   footer:false
});
  • вывести определенные данные из набора данных таблицы с помощью свойства filter. Значение свойства может задано как функция, которая возвращает данные, которые должны быть экспортированы:
webix.toExcel($$("data"), {
    filter:function(obj){
        return obj.checked;
    }
});

Related sample:  Specifying Data Items for Export

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

Наверх
If you have not checked yet, be sure to visit site of our main product Webix best ui framework and page of ui datagrid product.