Printing a page without showing it

We can actually print a page without showing it. For example you have a form which has a print button, and when the print button is clicked, it will print the form in another format, say multi-page report or you may apply some styles and formatting different from.

You actually two options:

1. Use CSS: Set the visible form as media=screen, and create another block that is CSS media=print. The visible block is visible only by screen and invisible by print media, whereas the block for printing is invisible on screen, but visible by print media. Ex:

@media screen {
    .you-div {
        /** 
         * styles here for the visible content on screen
         */
    }
}


@media print {
    .print-div {
        /** 
         * styles here for printing
         */
    }
}

This will work on both IE and Firefox.

2. Use rel link attribute to set different page in print media: Works only in IE. Simply put this on the head portion of the page:

<link rel="alternate" media="print" href="altpage.htm" />

And the JavaScript window.print() will print the altpage.htm (IE only). Since we are using Zend, here it is in our project.

//inside the controller

		$this->view->headLink(array(
								'rel'	=> 'alternate',
								'href'	=> (PUBLIC_WEB_PATH . '/index.php/iraisyo01/print/ref/' . $refNo . '/'),
								'media'	=> 'print'
								)
							);

//point it to the printable page, and the rest of the code are the same.

And when you execute window.print() it will print the other page.

However, for non-IE, it will not work, so we will load the page.

function processPrint()
{
	var previewOn;
	var refNo;
	var url;
	
	previewOn = $("input[id=chk-preview]:checked").val();
	refNo = $("input[id=Ref_No]").val();
	url = baseUrl+"/iraisyo04/print/ref/"+refNo;
	
	if (previewOn == "on")
	{
		url = url+"/mode/1";
		previewWin(url,"1020","670");
	}
	else
	{
		//check browser if IE
		if ($.browser.msie)
		{
			window.print();
		}
		else
		{
			url = url+"/mode/2";
			previewWin(url,"1020","670");	
		}
	}
}

That’s it!