Small Talks/2014/December/Printing In ZK

Author
Vincent Jian, Engineer, Potix Corporation

Date
December 10, 2014

Version
ZK 7.0.4

This page is under construction, so we cannot guarantee the accuracy of the content!

Introduction

Print a web page is a normal requirement for some specific business models. Therefore, it is a typical scenario to design two views: one for online browsing and one for printing. However, it is a time consuming job to design two layouts to suit both purposes. This smalltalk will introduce how to print selected area of a ZK page, thus you don't need to design two views.

Print a ZK page

Before we start print selected area, here we first introduce two methods to print a ZK page. The first method is browser's print function, user just need to press "Ctrl + P" to print the current page. The second method is to use Clients.print() API provided by ZK.

Sample

It is easy to use Clients.print() API, here is the simplest sample:

<zk>
	<window title="Print Whole Page" border="normal">
		<button label="Print" onClick="Clients.print()" />
		<grid>
			<columns>
				<column label="Column 1" />
				<column label="Column 2" />
			</columns>
			<rows>
				<row forEach="1,2,3,4,5">
					<label value="First Name" />
					<label value="Last Name" />
				</row>
			</rows>
		</grid>
	</window>
</zk>

Print Selected Area

Assume we just want to print the grid component, but with the "Ctrl + P" and Clients.print() methods, you can see the unnecessary button and window components are also printed. In this section we demonstrate how to print the selected area only.

Concept

Normally, we can use javascript function window.open() to open another browser tab or window and then pass the html content the new opened window to print. However, it is not a very user friendly design because sometimes browser tend to block pop-up window. Thus, here we will try to create a hidden iframe to avoid open another browser window.

Implement Steps

step by step implementation to create printing utility

Sample

an example to use the utility and briefly introduce how to design printing page.

Comments

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.