Java Example: Print

1. Print full page.

<button label="Print" onClick="Clients.print()" />

2. Print selected div.

Create PrintUtil java class.

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.util.Clients;

public class PrintUtil {

public static void print(Component comp) {
print(comp, "/MedXEMR/zk/template/template.zul", null);
}

public static void print(Component comp, String cssuri) {
print(comp, "/MedXEMR/zk/template/template.zul", cssuri);
}

public static void print(Component comp, String uri, String cssuri) {
String script = "printDiv('" + comp.getUuid() + "', '" + uri + "'";
if (cssuri != null) {
if (uri.contains("zkau") && !cssuri.startsWith("/"))
cssuri = "/" + cssuri; // absolute path if using default template.zul within jar file
script += ", '" + cssuri + "');";
} else {
script += ");";
}
Clients.evalJavaScript(script);

}
}

ZUL Code.

template.zul.

<div>

<n:hr />

<n:b>

PROHIBITION ON REDISCLOSURE OF CONFIDENTIAL INFORMATION

</n:b>

</div>

</zk>

Javascript Code.

function printDiv(uuid, uri, cssuri) {

if (uuid && uri) {

var wgt = zk.Widget.$(uuid), body = document.body, ifr = jq('#zk_printframe');

if (!ifr[0]) {

jq(body).append('<iframe id="zk_printframe" name="zk_printframe"' + ' style="width:0;height:0;border:0;position:fixed;"' + '></iframe>');

ifr = jq('#zk_printframe');

}

// wait form submit response then call print function

// reference: http://isometriks.com/jquery-ajax-form-submission-with-iframes

ifr.unbind('load.ajaxsubmit').bind('load.ajaxsubmit', function() {

var iw = ifr[0].contentWindow || ifr[0];

iw.document.body.focus();

iw.print();

});

jq(body).append('<form id="zk_printform" action="' + uri + '" method="post" target="zk_printframe"></form>');

var form = jq('#zk_printform'), content = '<div style="width: ' + wgt.$n().offsetWidth + 'px">' + jq(wgt.$n())[0].outerHTML + '</div>';

form.append(jq('<input/>').attr({

name : 'printContent',

value : content

}));

if (cssuri) {

form.append(jq('<input/>').attr({

name : 'printStyle',

value : cssuri

}));

}

form.submit().remove();

} else {

window.print();

}

how to call Print in zul?

class="btn btn-sm btn-default fa fa-print btn-group-btn"

onClick="com.swain..PrintUtil.print(sampleform)"

tooltiptext="Print">

</a>

Step 1.
add <zk xmlns:w="client"> tag.

Step 2.

    <button label="Print">
        <attribute w:name="onClick">
            print(this,'group',500,800,true);//
        </attribute>
    </button>
Parameter group box.
1. "group" id of groupbox.
2. 500 windows height.
3. 800 windows width.
4. true for style if true style will apply otherwise style not apply.

Full Page

Print listbox with style
code
    print Listbox with style:
    <button label="Print">
       <attribute w:name="onClick">
           print(this,'box1',500,800,true);
       </attribute>
    </button>
    <listbox id="box1" multiple="true" checkmark="true">

Print Groupbox.

code.
Print Box Area:
    <button label="Print">
        <attribute w:name="onClick">
            print(this,'group',500,800,true);
        </attribute>
    </button>
<groupbox id="group" >

Print Grid.
code.
        print Grid:
    <button label="Print">
        <attribute w:name="onClick">
            print(this,'grid',500,800,true);
        </attribute>
    </button>
    <grid id="grid">

Print Listbox without style
code.
    print Listbox without style:
    <button label="Print">
       <attribute w:name="onClick">
           print(this,'box',500,800,false);
       </attribute>
    </button>
    <listbox id="box" multiple="true" checkmark="true">

Full source code.

print.zul

<?page title="new page title" contentType="text/html;charset=UTF-8"?>

<zk xmlns:w="client">
<script><![CDATA[
function print(obj,id,height,width,style) {
DispWin = window.open('', '', 'toolbar=no,memubar=no,scrollbars=yes,status=no,width='+width+'px,height='+height+"px'");

DispWin.document.write('<html><head>');
if(style==true){
for(var i=0;i<document.styleSheets.length;i++){
    if(document.styleSheets[i].href != null)        {
        DispWin.document.write('<link rel="stylesheet" type="text/css" href="'+document.styleSheets[i].href+'">');
    }
}
}
DispWin.document.write('</head>');
DispWin.document.write('<body>');
DispWin.document.write('<p align="center"><input type="button" value="Close" onclick="window.close()"/>&nbsp&nbsp&nbsp&nbsp<input type="button" value="Print" onclick="print()"/></p>');
DispWin.document.write($(obj.$f(id)).formhtml());
DispWin.document.write('</body></html>');
DispWin.document.close();
//DispWin.close();
//DispWin.print();
}

(function($) {
    var oldHTML = $.fn.html;

    $.fn.formhtml = function() {
        if (arguments.length) return oldHTML.apply(this,arguments);
        $("input,button", this).each(function() {
          this.setAttribute('value',this.value);
          this.setAttribute('readonly',true);
        });
        $("textarea", this).each(function() {
          // updated - thanks Raja!
          this.innerHTML = this.value;
        });
        $("input:radio,input:checkbox", this).each(function() {
          // im not really even sure you need to do this for "checked"
          // but what the heck, better safe than sorry
          if (this.checked) this.setAttribute('checked', 'checked');
          else this.removeAttribute('checked');
        });
        $("option", this).each(function() {
          // also not sure, but, better safe...
          if (this.selected) this.setAttribute('selected', 'selected');
          else this.removeAttribute('selected');
        });
        return oldHTML.apply(this);
    };

    //optional to override real .html() if you want
    // $.fn.html = $.fn.formhtml;
    })(jQuery);

]]></script>
Print Box Area:
    <button label="Print">
        <attribute w:name="onClick">
            print(this,'group',500,800,true);
        </attribute>
    </button>
<groupbox id="group" >
<caption
                label="Box"
                sclass="group-header"/>
    print Listbox with style:
    <button label="Print">
        <attribute w:name="onClick">
            print(this,'box1',500,800,true);
        </attribute>
    </button>
    <listbox id="box1" multiple="true" checkmark="true">
        <listhead>
            <listheader label="Name" />
            <listheader label="Gender" />
            <listheader label="Age" />
        </listhead>
        <listitem>
            <listcell label="Mary" />
            <listcell label="FEMALE" />
            <listcell label="18" />
        </listitem>
        <listitem>
            <listcell label="John" />
            <listcell label="MALE" />
            <listcell label="20" />
        </listitem>
        <listitem>
            <listcell label="Jane" />
            <listcell label="FEMALE" />
            <listcell label="32" />
        </listitem>
        <listitem>
            <listcell label="Henry" />
            <listcell label="MALE" />
            <listcell label="29" />
        </listitem>
        <listitem>
            <listcell label="Mark" />
            <listcell label="MALE" />
            <listcell label="15" />
        </listitem>
    </listbox>
    print Listbox without style:
    <button label="Print">
        <attribute w:name="onClick">
            print(this,'box',500,800,false);
        </attribute>
    </button>
    <listbox id="box" multiple="true" checkmark="true">
        <listhead>
            <listheader label="Name" />
            <listheader label="Gender" />
            <listheader label="Age" />
        </listhead>
        <listitem>
            <listcell label="Mary" />
            <listcell label="FEMALE" />
            <listcell label="18" />
        </listitem>
        <listitem>
            <listcell label="John" />
            <listcell label="MALE" />
            <listcell label="20" />
        </listitem>
        <listitem>
            <listcell label="Henry" />
            <listcell label="MALE" />
            <listcell label="29" />
        </listitem>
        <listitem>
            <listcell label="Mark" />
            <listcell label="MALE" />
            <listcell label="15" />
        </listitem>
        <listitem>
            <listcell label="Jeffery" />
            <listcell label="MALE" />
            <listcell label="17" />
        </listitem>
    </listbox>
        print Grid:
    <button label="Print">
        <attribute w:name="onClick">
            print(this,'grid',500,800,true);
        </attribute>
    </button>
    <grid id="grid">
    <auxhead>
        <auxheader label="H1'07" colspan="6"/>
        <auxheader label="H2'07" colspan="6"/>
    </auxhead>
    <auxhead>
        <auxheader label="Q1" colspan="3"/>
        <auxheader label="Q2" colspan="3"/>
        <auxheader label="Q3" colspan="3"/>
        <auxheader label="Q4" colspan="3"/>
    </auxhead>
    <columns>
        <column label="Jan"/><column label="Feb"/><column label="Mar"/>
        <column label="Apr"/><column label="May"/><column label="Jun"/>
        <column label="Jul"/><column label="Aug"/><column label="Sep"/>
        <column label="Oct"/><column label="Nov"/><column label="Dec"/>
    </columns>
    <rows>
        <row>
            <label value="1,000"/><label value="1,100"/><label value="1,200"/>
            <label value="1,300"/><label value="1,400"/><label value="1,500"/>
            <label value="1,600"/><label value="1,700"/><label value="1,800"/>
            <label value="1,900"/><label value="2,000"/><label value="2,100"/>
        </row>
        <row>
            <label value="1,500"/><label value="2,100"/><label value="1,200"/>
            <label value="1,100"/><label value="2,400"/><label value="1,700"/>
            <label value="1,500"/><label value="3,700"/><label value="1,800"/>
            <label value="1,300"/><label value="2,000"/><label value="2,500"/>
        </row>
    </rows>
</grid>
    </groupbox>
</zk>

Java Example

Tuesday, May 3, 2016

How to Print in Zk

Thursday, June 20, 2013

How to print selected area in zk

How ChatGPT can Benefit Coding: Your Guide to Leveraging an AI Language Model