ZK Spreadsheet Essentials/Working with ZK Spreadsheet/Display the Excel Book File

Purpose

Display Excel book file using ZK Spreadsheet component.

ZUML

Using src attribute

Simplest way to display Excel book file is by setting src attribute of ZK Spreadsheet component to the file location. File location can be either relative to the web application root or absolute.

<?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 setArc() API

In case of using Java to display Excel book file, ZK Spreadsheet component's setSrc(java.lang.String) method can be used. 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 same Excel book file shared by multiple users, Importer interface along with ZK Spreadsheet setBook(Book) API can be used. Normally one would obtain Book instance by importing an Excel book file. Use Importer interface imports(java.io.InputStream, java.lang.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.impl.ExcelImporter;
	import org.zkoss.zss.ui.Spreadsheet;
	void showBook(UploadEvent event) {
		org.zkoss.util.media.Media media = event.getMedia();
		if (media.isBinary()) {
			Importer importer = new ExcelImporter();
			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 on the same Excel book file.

Version History

Version	Date	Content

All source code listed in this book is at Github.