Display the Excel Book File

This article is out of date, please refer to http://books.zkoss.org/wiki/ZK_Spreadsheet_Essentials for more up to date information.

Purpose

Display Excel book file using ZK Spreadsheet component.

ZUML

Using src attribute

The simplest way to display Excel book file is by setting src attribute of ZK Spreadsheet component to the file location. The file path can be given as a relative URI with respect to the web application root or as an absolute URI.

<?page title="ZSS Display Excel Book using src attribute" contentType="text/html;charset=UTF-8"?>
<zk>
	<spreadsheet id="spreadsheet" src="/WEB-INF/excel/display/display.xls" maxrows="200"
		maxcolumns="40" vflex="1" width="100%">
	</spreadsheet>
</zk>

Using setSrc() API

ZK Spreadsheet component's Spreadsheet.setSrc(String) API can be called to display an Excel book file programmatically in Java. Similar to src attribute, this method accepts either relative or absolute file location.

<?page title="ZSS Display Excel Book using setSrc() API" contentType="text/html;charset=UTF-8"?>
<window width="100%" height="100%">
	Excel Book Files:
	<listbox id="books" mold="select" rows="1"
		onSelect="changeBook()">
		<listitem label="Default Book"
			value="/WEB-INF/excel/display/display.xlsx" />
		<listitem label="Engineering"
			value="/WEB-INF/excel/display/engineering.xlsx" />
		<listitem label="Financial"
			value="/WEB-INF/excel/display/financial.xlsx" />
	</listbox>
	<zscript>
	void changeBook() {
		spreadsheet.setSrc(books.getSelectedItem().getValue().toString());
	}
</zscript>
	<spreadsheet id="spreadsheet"
		src="/WEB-INF/excel/display/display.xlsx" maxrows="200"
		maxcolumns="40" vflex="1" width="100%">
	</spreadsheet>
</window>

Using setBook() API

In case you want to display user uploaded Excel book file or display the same Excel book file shared by multiple users, importer interface along with ZK Spreadsheet Spreadsheet.setBook(Book) API can be used. Normally one would obtain Book instance by importing an Excel book file. Use Importer interface Importer.imports(InputStream, String) API to import Excel book file. It returns Book instance which can be passed to setBook(Book) API to display imported Excel book file.

<?page title="ZSS Display Excel Book using setBook() API" contentType="text/html;charset=UTF-8"?>
<window id="mainwin" width="100" height="100%">
	<button id="uploadBtn" label="Upload Spreadsheet" upload="true"
		onUpload="showBook(event)" />
	<zscript>
	import org.zkoss.zk.ui.event.UploadEvent;
	import org.zkoss.zss.model.Book;
	import org.zkoss.zss.model.Importer;
	import org.zkoss.zss.model.Importers;
	import org.zkoss.zss.ui.Spreadsheet;
	void showBook(UploadEvent event) {
		org.zkoss.util.media.Media media = event.getMedia();
		if (media.isBinary()) {
			Importer importer = Importers.getImporter("excel");
			Book book = importer
					.imports(media.getStreamData(), media.getName());
			Spreadsheet spreadsheet = new Spreadsheet();
			spreadsheet.setBook(book);
			spreadsheet.setMaxcolumns(40);
			spreadsheet.setMaxrows(200);
			spreadsheet.setWidth("800px");
			spreadsheet.setHeight("800px");
			mainwin.appendChild(spreadsheet);
		}
	}
</zscript>
</window>

This is especially powerful in multi-user collaborative scenario. For example once Excel book file is imported using Importer interface and put into application scope, it can be applied to multiple ZK Spreadsheet components each used by different user. ZK Spreadsheet will propagate any changes made to this Book instance to whichever ZK Spreadsheet component it is applied to and therefore facilitate multiple users to collaborate the same Excel book file.

Version History

Version	Date	Content

All source code listed in this book is at Github.