Импорт Excel-файлов

Загрузка данных из Excel в SpreadSheet

Вы можете импортировать данные из файла Excel в SpreadSheet одним из способов:

a) указать нужный файл в конструкторе SpreadSheet с помощью параметра url:

webix.ui({
    view:"spreadsheet",
    url: "binary->../common/test.xlsx",
    datatype:"excel"
});

Запись "binary->../common/test.xlsx" позволяет загружать скомпилированные файлы с компьютера и получать их содержимое.

Свойство datatype позволяет анализировать содержимое двоичного файла и получать его в нужной для SpreadSheet форме.

b) вызвать метод load:

$$("ssheet").load("binary->../common/test.xlsx", "excel");

Параметры метода:

• file - (string) имя загружаемого файла
• datatype - (string) тип данных (в данном случае "excel")<

c) использовать метод parse для загрузки данных в компонент:

{ view:"uploader", value:"Load from Excel file", on:{
    onBeforeFileAdd: function(upload){
        $$("ssheet").reset();
        $$("ssheet").parse(upload.file, "excel");
        return false;
    }
}}

Параметры метода:

• file - (object) загруженный файл объекта
• datatype - (string) тип данных (в данном случае "excel")

Импорт настроек

SpreadSheet позволяет импортировать настройки из файла Excel. Стили, ширина столбцов и высота строк импортируются по умолчанию. Также вы можете импортировать:

• математические формулы

Для этого задайте свойству math значение true (если не задано).

webix.ui({
    view: "spreadsheet",
    data: base_data,
    math: true
});

• объединенные столбцы и строки

Чтобы импортировать объединения столбцов и строк, задайте свойству spans значение true в настройках SpreadSheet config:

webix.ui({
    view: "spreadsheet",
    data: base_data,
    spans: true
});

• листы

По умолчанию Spreadsheet показывает только первый импортированный лист. Чтобы просмотреть все листы, установите значение bottombar:true или toolbar:"full" в конфигурации SpreadSheet:

webix.ui({
    view:"spreadsheet",
    data: base_data,
    toolbar: "full" // или bottombar:true
});

Вы можете переключаться между листами с помощью метода showSheet(name):

$$("ssheet").showSheet("Tab 1");

• даты

SpreadSheet позволяет импортировать даты в Webix формате.

• настройки стилей

Стили по умолчанию импортируются из файла Excel. Однако вы можете отключить загрузку стилей для ускорения импорта данных, отключив свойство конфигурации loadStyles:

webix.ui({
    view:"spreadsheet",
    loadStyles:false,
    data:spreadsheet_data
});

Related sample:  Spreadsheet: loadStyles

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

webix.ui({
    view:"spreadsheet",
    toolbar:"full",
    sheetStubs:true,
    data:spreadsheet_data
});

Настройка импортируемых данных

Вы можете настраивать представление загружаемых данных: устанавливать название листа, контролировать число загружаемых строк.

webix.ui({
    view:"spreadsheet",
    url: "binary->../common/test.xlsx@Data[0-10]",
    datatype:"excel"
});

Строковое значение "binary->files/data.xlsx@Data[1-10]" свойства url состоит из следующих частей:

• binary - имя прокси объекта
• ../common/test.xlsx - путь к файлу Excel
• @ - необязательный параметр, разделитель ссылки и параметров (может быть опущен вместе с параметрами)
• Data - необязательный параметр, имя листа Excel для отображения
• [1-10] - необязательный параметр, строки которые должны быть отображены

Чтобы отобразить строки начиная с определенной, задайте массив строк как [8-].

Related sample:  Import from Excel

Импорт данных офлайн

Зависимости, необходимые для импорта данных из файлов Excel в SpreadSheet, обычно берутся из онлайн-каталога Webix CDN. Чтобы импортировать данные офлайн, необходимо выполнить следующие шаги:

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

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

webix.env.cdn = "/local_folder";

Задавая путь к локальному CDN репозиторию, обратите внимание на некоторые особенности.

• чтобы задать путь относительно текущей страницы:

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

• чтобы задать абсолютный путь к репозиторию:

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

Какие элементы/настройки импортируются из Excel

• данные (включая математику и даты)
• шрифт
• размер шрифта (pt конвертируется в px)
• полужирный, курсив, подчеркнутый, зачеркнутый шрифт
• цвет фона
• цвет шрифта
• границы ячеек
• горизонтальное выравнивание
• вертикальное выравнивание
• размеры строк/колонок (pt конвертируется в px)
• скрытые строки/колонки
• объединенные ячейки
• перенос текста в ячейке
• отступы
• числовой формат
• именованные диапазоны
• ссылки (все ссылки конвертируются в метод HYPERLINK)
• видимость листа
• изображения
• фильтры
• масштабирование
• видимость заголовка
• линии сетки
• режим формул
• группировка строк и столбцов

Вы можете сравнить, какие элементы и настройки SpreadSheet можно импортировать и экспортировать в Excel.

Наверх