Printing In ZK
Vincent Jian, Engineer, Potix Corporation
December 10, 2014
ZK 7.0.4
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.
Summary
Download
Comments
Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |