I have shared some sample projects that worked as tutorial or demonstration for Aspose products. This time, I tried something a little bigger – HTML5 Spreadsheet Editor. Yes, I am sharing a web application that loads a Microsoft Excel file, and lets you view and edit it in a web browser. The initial version is limited in its functionality. I’ll release newer versions from time to time to make a complete replacement of desktop software. The best part is – it is open source. Let’s take a look at the editor.
JSF is a component-based web application framework. It is a part of Java standards. A wide range of third-party components are available for JSF. These components can be plugged into any JSF application. The JSF managed beans technology is yet another technology to split your whole project design into independent self-contained components. Objects are created, serialized, de-serialized, injected, managed and destroyed by the application server.
Aspose.Cells for Java is the most comprehensive library to create and manipulate Excel files. I used this library to perform all operations; ranging from fetching worksheets, rows, columns, cells to updating the cells.
HTML5 Spreadsheet Editor is an in-browser viewer and editor for Excel files. It supports XLS, XLSX, XLSM, XLSB, XLTX, SpreadsheetML, CSV, ODS. The file can be opened by specifying it in URL.
Opening a Workbook
To open an Excel workbook, specify it in the URL. For example http://spreadsheet-editor.aspose.com/?url=http://example.com/Sample.xlsx. The editor loads the file and displays it as shown above.
Viewing a Workbook
The contents of workbook are displayed in rows and columns style, as we see in the Microsoft Excel desktop application. The editor supports text formatting too.
Working with Sheets
At the top right-hand corner of HTML5 Spreadsheet Editor is a drop-down list of sheets. The selected sheet is the one which opened by the editor. To switch to another sheet, select it from the list.
You can edit any cell by a double-click. When you double-click a cell, it switches to edit-mode. To cancel editing, press the ESC key. To commit the edit value, press ENTER. You can also press TAB to move to the next cell. You can specify static text and numbers. Formulas are supported too. To enter a formula, start the cell value with an equal sign (=). For example =SUM(A1:A5). All formulas supported by Microsoft Excel are supported by HTML5 Spreadsheet Editor too.
Working with Rows
Adding and removing rows is very easy. The first column of the spreadsheet shows the row ID. Click on a row ID to select the entire row. Right-click and click Add a Row Below to add a new row right below the selected row. You can remove a row by following same method and clicking Delete Row.
Saving a File
After you are finished editing, Click Save on the Spreadsheet menu. The modified file is available for download.
You can embed HTML5 Spreadsheet Editor in any website of your choice using IFRAME. Here is an example code:
Your web browser does not support IFRAMEs
HTML5 Spreadsheet Editor requires any standard compliant Java application server that supports CDI. I have tested it on Glassfish 4.0. Just download the source code and build using Maven.
We love open source. Our choice of MIT license gives you the freedom to use, copy, modify and distribute our software without additional liabilities. Download the complete source code from your favourite site:
Your feedback is very important to us. Download and run the app at your side. Feel free to suggest enhancements and report bugs.