I ran into a need for a print preview on my website the other day and was unable to find a quick solution, so with a little thought I whipped up a small function which does just that with CSS and Javascript. Here’s what I come up with:

<link id=”screenCSS” media=”all” rel=”stylesheet” type=”text/css” />
<link id=”printCSS” media=”print” rel=”stylesheet” type=”text/css” />
<script language=”javascript”>
function togglePrintPreview()
{
     var currCSS = document.getElementById(’printCSS’);
     if(currCSS.media == ‘all’)
         currCSS.media = ‘print’;
     else currCSS.media = ‘all’;
}
</script>

Pretty simple theory.. just toggle the media attribute of the link tags from “print” to “all”. Maybe a little dumb,.. but very practical. View Example