Импорт 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");

• dates

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

• styles settings

Styles are imported from an Excel file by default. However, you can disable styles loading to speed up the data import by disabling the loadStyles configuration property like this:

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

Related sample:  Spreadsheet: loadStyles

By default, the styles of empty cells are not imported from an Excel file for performance reasons, but you can enable the import of the empty cells' styles, if needed. For this, set the sheetStubs property in the Spreadsheet configuration to true as in:

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.

Наверх