Web apps are dominating in the modern software development. Born as stateless pieces of HTML, they have evolved to dynamic and smart applications, still bound to the browser and the HTML markup. The next step of evolution is happening just now. A web app is moving beyond the boundaries of the browser. On the one hand, we already have desktop and mobile apps which, in fact, are wrapped web apps, on the other hand, web apps learn how to interact with desktop apps.
In Webix 3.0 we have added a few new API to simplify such a client <-> desktop data interchange.
Data Export from a web app
With Webix 3.0, you have two very powerful data export commands. They are:
webix.toExcel($$("datatable"));
Those commands allow exporting any Webix component to PNG or Excel. In the case of export to PNG, you can use API with any HTML content. Yes, you can export any HTML content on the page to a PNG image.
webix.toPNG(document.body);
You can use Export to Excel with any Webix data component. It works perfectly for datatable, where the export file will have the same header and data as the original datatable. For other components, the code will try to guess the structure of data and generate the export file automatically. Surely, API allows configuring the structure and naming of the export file. Check the documentation for more details.
Both types of data export work fully on the client side and do not require any special software on the server side.
Data Import into a web app
In the daily work we use many other formats of documents. Still, the majority of documents are stored in Adobe PDF or Microsoft Office formats. Now you can use special Webix views to show such documents directly in your app (beware that data import views are available only in the Webix Pro).
PDF View is based on the wonderful Mozilla’s PDF.js project. This Javascript library loads a pdf file and renders it as a part of the HTML page. It requires just a line of code from a a developer:
You can get more info in the documentation.
MS Excel
For Microsoft Excel files you can use a sibling “excelviewer” component. It is based on the js-xlsx project. The code is simple as well:
If you don’t need to show Excel data and just want to use it in some other component or import it into a database, you can use the new API of Webix 3.0.
$$("viewer").load("excel->files/data.xlsx");
//just import data
webix.excel.load("files/data.xlsx").then(function(data){
//do something with data
});
By combining Data Import and Data Export functionality, it’s possible to create a workflow, where you can export data from a web app as an Excel file, edit it locally in the MS Excel and drag the result file back to the web app.
You can find more samples and snippets in the documentation.
What’s next
Import and Export APIs in Webix 3.0 reduce the gap between a web app and a desktop one.
There are still many things that can be improved, and we will improve them in next updates. Feel free to share your ideas and suggestions in the comments.
In the next article, I will show how Webix based apps can be wrapped to achieve even more tight integration with user’s desktop. Stay tuned.
