Data Export from a web app
With Webix 3.0, you have two very powerful data export commands. They are:webix.toPNG($$("chart"))
webix.toExcel($$("datatable"));
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.
// export the whole page to an image
webix.toPNG(document.body);
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.
PDF
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:
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).{ view:"pdfviewer", url:"files/WebixDocs.pdf"}
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:{ view:"excelviewer", url:"files/data.xlsx" }
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.
//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
});
$$("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.
