Description & Source Code

A wrapper component for JasperReport. Depending on your browser, clicking the "Get Report" button would either embed a report in the browser or a native dialog would be invoked to prompt you to save the file.
This demo shows following file type reports :

  • PDF
  • HTML
  • Word (RTF)
  • Excel
  • Excel (JXL)
  • CSV
  • OpenOffice

<div apply="org.zkoss.bind.BindComposer" 
	viewModel="@id('vm') @init('demo.reporting.jasperreport.JasperReportViewModel')">
	Choose a File Type : <listbox id="format" mold="select" model="@load(vm.reportTypesModel)" 
		<template name="model">
			<listitem value="@load(each)" label="@load(each.label)"></listitem>

	<button label="Get Report" onClick="@command('showReport')" />

	<jasperreport id="report" height="360px" 
		src="@load(vm.reportConfig.source, after='showReport')" 
		parameters="@load(vm.reportConfig.parameters, after='showReport')" 
		type="@load(vm.reportConfig.type.value, after='showReport')" 
		datasource="@load(vm.reportConfig.dataSource, after='showReport')"/>

package demo.reporting.jasperreport;

import java.util.Arrays;

import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zul.ListModelList;

public class JasperReportViewModel {

	ReportType reportType = null;
	private ReportConfig reportConfig = null;
	private ListModelList<ReportType> reportTypesModel = new ListModelList<ReportType>(
					new ReportType("PDF", "pdf"), 
					new ReportType("HTML", "html"), 
					new ReportType("Word (RTF)", "rtf"), 
					new ReportType("Excel", "xls"), 
					new ReportType("Excel (JXL)", "jxl"), 
					new ReportType("CSV", "csv"), 
					new ReportType("OpenOffice (ODT)", "odt")));

	public void showReport() {
		reportConfig = new ReportConfig();
		reportConfig.setDataSource(new CustomDataSource());
	public ListModelList<ReportType> getReportTypesModel() {
		return reportTypesModel;

	public ReportConfig getReportConfig() {
		return reportConfig;
	public ReportType getReportType() {
		return reportType;

	public void setReportType(ReportType reportType) {
		this.reportType = reportType;
package demo.reporting.jasperreport;

import java.util.HashMap;
import java.util.Map;

import net.sf.jasperreports.engine.JRDataSource;

public class ReportConfig {

	private String source = "/widgets/reporting/jasperreport/jasperreport.jasper";
	private Map<String, Object> parameters;
	private JRDataSource dataSource;
	private ReportType type;

	public ReportConfig() {
		parameters = new HashMap<String, Object>();
		parameters.put("ReportTitle", "Address Report");
		parameters.put("DataFile", "CustomDataSource from java");
	public ReportType getType() {
		return type;

	public void setType(ReportType selectedReportType) {
		this.type = selectedReportType;

	public String getSource() {
		return source;

	public Map<String, Object> getParameters() {
		return parameters;

	public JRDataSource getDataSource() {
		return dataSource;

	public void setDataSource(JRDataSource reportDataSource) {
		this.dataSource = reportDataSource;
package demo.reporting.jasperreport;

public class ReportType {
	private String value;
	private String label;

	public ReportType(String label, String value) {
		this.value = value;
		this.label = label;

	public String getValue() {
		return value;

	public String getLabel() {
		return label;
package demo.reporting.jasperreport;

import net.sf.jasperreports.engine.JRDataSource;
import net.sf.jasperreports.engine.JRException;
import net.sf.jasperreports.engine.JRField;

 * @author Teodor Danciu (
 * @version $Id: 1229 2006-04-19 10:27:35Z teodord $
public class CustomDataSource implements JRDataSource {

	private Object[][] data = {
			{"Berne", Integer.valueOf(22), "Bill Ott", "250 - 20th Ave."},
			{"Berne", Integer.valueOf(9), "James Schneider", "277 Seventh Av."},
			{"Boston", Integer.valueOf(32), "Michael Ott", "339 College Av."},
			{"Boston", Integer.valueOf(23), "Julia Heiniger", "358 College Av."},
			{"Chicago", Integer.valueOf(39), "Mary Karsen", "202 College Av."},
			{"Chicago", Integer.valueOf(35), "George Karsen", "412 College Av."},
			{"Chicago", Integer.valueOf(11), "Julia White", "412 Upland Pl."},
			{"Dallas", Integer.valueOf(47), "Janet Fuller", "445 Upland Pl."},
			{"Dallas", Integer.valueOf(43), "Susanne Smith", "2 Upland Pl."},
			{"Dallas", Integer.valueOf(40), "Susanne Miller", "440 - 20th Ave."},
			{"Dallas", Integer.valueOf(36), "John Steel", "276 Upland Pl."},
			{"Dallas", Integer.valueOf(37), "Michael Clancy", "19 Seventh Av."},
			{"Dallas", Integer.valueOf(19), "Susanne Heiniger", "86 - 20th Ave."},
			{"Dallas", Integer.valueOf(10), "Anne Fuller", "135 Upland Pl."},
			{"Dallas", Integer.valueOf(4), "Sylvia Ringer", "365 College Av."},
			{"Dallas", Integer.valueOf(0), "Laura Steel", "429 Seventh Av."},
			{"Lyon", Integer.valueOf(38), "Andrew Heiniger", "347 College Av."},
			{"Lyon", Integer.valueOf(28), "Susanne White", "74 - 20th Ave."},
			{"Lyon", Integer.valueOf(17), "Laura Ott", "443 Seventh Av."},
			{"Lyon", Integer.valueOf(2), "Anne Miller", "20 Upland Pl."},
			{"New York", Integer.valueOf(46), "Andrew May", "172 Seventh Av."},
			{"New York", Integer.valueOf(44), "Sylvia Ott", "361 College Av."},
			{"New York", Integer.valueOf(41), "Bill King", "546 College Av."},
			{"Oslo", Integer.valueOf(45), "Janet May", "396 Seventh Av."},
			{"Oslo", Integer.valueOf(42), "Robert Ott", "503 Seventh Av."},
			{"Paris", Integer.valueOf(25), "Sylvia Steel", "269 College Av."},
			{"Paris", Integer.valueOf(18), "Sylvia Fuller", "158 - 20th Ave."},
			{"Paris", Integer.valueOf(5), "Laura Miller", "294 Seventh Av."},
			{"San Francisco", Integer.valueOf(48), "Robert White", "549 Seventh Av."},
			{"San Francisco", Integer.valueOf(7), "James Peterson", "231 Upland Pl."}

	private int index = -1;

	public CustomDataSource() {

	public boolean next() throws JRException {
		return (index < data.length);

	public Object getFieldValue(JRField field) throws JRException {
		Object value = null;
		String fieldName = field.getName();
		if ("the_city".equals(fieldName)) {
			value = data[index][0];
		} else if ("id".equals(fieldName)) {
			value = data[index][1];
		} else if ("name".equals(fieldName)) {
			value = data[index][2];
		} else if ("street".equals(fieldName)) {
			value = data[index][3];
		return value;