Import/Export в Webix 3.0

Не секрет, что веб-приложения — самый активный сегмент в современной разработке ПО. Изначально это были лишь статические HTML страницы, которые со временем превратились в динамические приложения, по прежнему связанные с браузером и HTML-разметкой. Процесс развития продолжается прямо сейчас. Веб-приложения уже выходят за пределы браузера: с одной стороны, мы можем писать приложения для мобильных устройств и десктопа, используя веб-технологии, с другой стороны, веб-приложения получают все больше средств доступа к ресурсам устройств, на которых они работают.
Следуя этой тенденции, в Webix 3.0 мы добавили пару новых API, которые порядком упрощают обмен данными между веб-приложением и рабочей средой пользователя.

Как экспортировать данные из веб-приложения

Очень легко. С Webix 3.0 у вас есть две мощные команды для экспорта:

webix.toPNG($$("chart"))
webix.toExcel($$("datatable"));

export to png

Эти функции позволяют экспортировать Webix компонент в PNG или Excel файл. В случае экспорта в PNG вы можете использовать API не только с Webix компонентами, но и с любым HTML контентом.

// export the whole page to an image
webix.toPNG(document.body);

В случае с экспортом в Excel, функциональность работает только с Webix компонентами. Это идеальное дополнение для Webix JavaScript DataTable, в этом случае экспортируемый файл будет иметь ту же структуру, что и DataTable виджет. Что до остальных компонентов, код экспорта постарается предсказать правильную структуру данных  и сгенерировать экспортируемый файл автоматически. Естественно, API позволяет сконфигурировать все настройки, структуру и название экспортируемого файла. Подробности вы можете найти в нашей документации. Как импорт, так и экспорт, полностью работают на стороне клиента, то есть никакое дополнительно ПО вам не понадобится.

Импорт данных в веб-приложение

Каждый день мы используем множество различных форматов документов. При всем разнообразии, чаще всего это файлы Adobe PDF или Microsoft Office. В последней версии Webix вы можете использовать специальные Webix View для демонстрации таких документов непосредственно в вашем приложении (функциональность доступна лишь в Webix Pro).

PDF

PDF View разработан на основе проекта PDF.js от Mozilla. Эта JavaScript библиотека загружает файл в формате PDF и делает его частью страницы HTML. От разработчика нужна лишь одна строчка кода:

{ view:"pdfviewer", url:"files/WebixDocs.pdf"}

pdfviewer_front

 

Больше информации ищите в  документации.

MS Excel

Для Microsoft Excel можно использовать компонент «ExcelViewer», который основан на проекте JS-XLSX. Код крайне прост:

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

excel viewer

 

Если показывать данные Excel вам не надо, и вы просто хотите использовать их в другом компоненте или импортировать в базу данных, то для этого есть отдельное новое API в Webix 3.0.

//load data into ANY Webix view
$$("viewer").load("excel->files/data.xlsx");

//just import data
webix.excel.load("files/data.xlsx").then(function(data){
//do something with data
});

Объединив функциональность импорта и экспорта данных, можно создать простой рабочий процесс, в котором возможно экспортировать данные из веб-приложения в виде файла Excel, редактировать его локально в MS Excel и перетаскивать готовый файл обратно в веб-приложение. Примеры и подробности можно прочитать в нашей документации.

Чего ждать дальше

Импорт и экспорт API в Webix 3.0 значительно сокращает разрыв между десктопными и веб-приложениями и упрощает жизнь веб-разработчиков. Есть еще много вещей, которые могут быть улучшены, и в последующих обновлениях мы это наглядно продемонстрируем. Не стесняйтесь делиться своими идеями и предложениями в комментариях.