Блог

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 значительно сокращает разрыв между десктопными и веб-приложениями и упрощает жизнь веб-разработчиков. Есть еще много вещей, которые могут быть улучшены, и в последующих обновлениях мы это наглядно продемонстрируем. Не стесняйтесь делиться своими идеями и предложениями в комментариях.

Автор
The following two tabs change content below.
Olga Vazhnik

Olga Vazhnik

Olga Vazhnik

Latest posts by Olga Vazhnik (see all)

Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn VK Vote on Reddit