This code snippet will show, how to get Printer Friendly Version from a Web Page. This Printer Friendly Page will have your CSS Reference too.
function PrintPage()
{
var IsPrinter = (window.print) ? 1 : 0;
if(!IsPrinter)
return;
var printArea = document.getElementById("printContainer");
if(printArea)
{
var startString = "<html><body style=\"background-color:white;padding:5px;width:250px \" onload=\"onloadPrint()\">\n<link href=\"../Styles/Styles.css\" rel=\"stylesheet\" type=\"text/css\" />\n<div id=\"printContainer\">";
endString = "</div></body></html>";
var w = window.open('','printWin','scrollbars=yes');
wdoc = w.document;
wdoc.open();
wdoc.write(startString + printArea.innerHTML );
wdoc.write(endString);
wdoc.close();
}
}
function onloadPrint()
{
window.print();
}
Code Explanation : Here only you need to put a DIV with ID "printContainer" (You can put your own ID if you don't like it ;) , Make sure that ID after the page comes in HTML form and referencing in JS code should be the same) which must have only those content which has to be available in Printer Freindly Version. You can call this function from any button's client click. This function is creating another web page which is Printer Friendly and after loading this page, Printer options will come autometicaly because new page's page load is calling a function "onloadPrint()". Now .. here you go....