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

SpreadSheet поддерживает только именованные диапазоны конкретных листов, глобальные именованные диапазоны не импортируются.

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

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

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

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

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

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

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

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

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

webix.env.cdn = "/local_folder";

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

  • чтобы задать путь относительно текущей страницы:
webix.env.cdn = "../../../../local_folder";
  • чтобы задать абсолютный путь к репозиторию:
webix.env.cdn = "http://localhost/local_folder";
Наверх
If you have not checked yet, be sure to visit site of our main product Webix javascript ui components library and page of javascript spreadshee product.