Available only in PRO Edition

Excel Viewer

Since 3.0

Справочник по API

• Методы, свойства и события
• Примеры

Обзор

ExcelViewer - это компонент для просмотра файлов Excel.

Related sample:  Excel Viewer

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

{
    view:"excelviewer",
    toolbar:"toolbar",
    excelHeader:true,
    url:"binary->files/data.xlsx"
}

Свойства конфигурации:

• toolbar - (string) ID тулбара (если используется);
• excelHeader - (boolean) делает первую строку таблицы заголовком столбца;
• url - (string) путь к данным, которые загрузятся в компонент сразу после инициализации.

Для загрузки файла используется бинарный proxy, который позволяет получить его содержимое в виде ArrayBuffer.

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

Особенности API Excel Viewer

load

Загружает данные из внешнего источника данных.

Параметры:

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

$$("viewer").load("binary->data.xlsx", "excel");

parse

Загружает данные, доступные на клиенте.

Параметры:

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

{
    view:"uploader", value:"Select Excel File", width:200,
    on:{
        onBeforeFileAdd:function(upload){
            $$("excel").clearAll();
            $$("excel").parse(upload.file, "excel");
            return false;
        }
    }
}

Related sample:  Excel File Uploading and Downloading

showSheet

Переключает на указанный лист.

Параметры:

• name - (string) название листа

$$("viewer").showSheet("Data");

Особенности API тулбара

Для удобства переключения между листами вы можете дополнить Excel Viewer специальным тулбаром. Чтобы отобразить тулбар с вкладками, которые соответствуют листам Excel, инициализируйте компонент excelbar:

{
    view:"excelbar",
    id:"toolbar"
}

• id (string) - ID тулбара

getInput()

Возвращает объект тулбара:

$$("toolbar").getInput();

getValue()

Возвращает выделенную вкладку:

$$("toolbar").getValue();

• tab - (string) название выделенной вкладки

setSheets()

Устанавливает вкладки тулбара (должны соответствовать листам Excel).

Параметры:

• sheets - (array) массив вкладок

$$("toolbar").setSheets(["Data", "Files"]);

setValue()

Устанавливает выбранную вкладку на тулбаре.

Параметры:

• value - (string) название вкладки, которую нужно выделить

$$("toolbar").setValue(value);

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

Существует три способа загрузить данные в Excel Viewer:

• сослаться на нужный файл в конструкторе, используя свойство url:

{
    view:"excelviewer",
    url:"binary->files/data.xlsx"
}

Related sample:  Excel Viewer

• вызвать метод load с названием файла в качестве параметра

{ view:"excelviewer", id:"excel", editable:true, header:false },
...
$$("excel").load("binary->files/data.xlsx", "excel");

Для загрузки файла используется binary proxy, который позволяет получить его содержимое в виде ArrayBuffer. Тип данных по умолчанию - excel.

• парсинг данных загруженного файла с помощью метода parse

{ view:"uploader", value:"Select Excel File", width:200,
    on:{
        onBeforeFileAdd:function(upload){
            $$("excel").clearAll();
            $$("excel").parse(upload.file, "excel");
            return false;
        }
    }
}

Related sample:  Excel File Uploading and Downloading

Настройки импорта

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

• объединения строк и столбцов, для этого используйте настройку spans:true:

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

Related sample:  Excel File Uploading and Downloading

• листы

По умолчанию Excel Viewer показывает только первый импортированный лист. Чтобы просмотреть все листы, задайте компонент excelbar:

// устанавливает excelbar
{
    view:"excelbar",
    id:"toolbar1"
}
 
// применяет excelbar
{
    view:"excelviewer",
    toolbar:"toolbar1"
}

• даты

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

Работа с загруженными данными

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

{
    view:"excelviewer",
    url:"binary->files/data.xlsx@Data[1-10]"
}

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

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

Related sample:  Excel Proxy

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

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

• высоту строк

Эта настройка регулируется свойством heights, которое может принимать следующие значения:

• true - экспортируются только пользовательские значения высоты строк (отличные от значения rowHeight по умолчанию);
• "all" - экспортируются все значения высоты (пользовательские и по умолчанию);
• false - (значение по умолчанию) высота строк не экспортируется.

webix.toExcel($$("excelviewer"), { heights:true});

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

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

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

webix.toExcel($$("excelviewer"), { spans:true});

• несколько листов

По умолчанию Excel Viewer экспортирует активный лист файла Excel. Есть и другие варианты экспорта:

1) экспорт всех листов, для этого задайте sheets:true во втором параметре метода toExcel

webix.toExcel($$("excelviewer"), { sheets:true});

2) экспорт отдельных листов, для этого задайте массив с ID листов в качестве значений параметра sheets:

webix.toExcel($$("excelviewer"), { sheets:["s1","s2"]});

3) экспорт определенного листа, для этого задайте его ID как значение параметра sheets:

webix.toExcel($$("excelviewer"), { sheets:"s2"});

Related sample:  Excel Viewer

Работа с Excel Viewer оффлайн

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

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

• переименовать папку на "extras" и переместите в нужную директорию
• задать путь к CDN:

webix.env.cdn = "/local_folder";

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

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

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

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

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

Наверх