Although I wasn’t using Sharepoint for this website, I was using jQuery, so I leveraged this idea to print specific portions of a website instead of only Sharepoint specific content. This site was also using jQuery UI for creating rich internet content, specifically the tabs, accordion, and dialog widgets. The incredible thing about widgets is that they allow for highly interactive sites, yet the trouble with widgets is that they are not conducive to easily printing their content.

If you tried printing the default tabs example using jQuery UI, you end up with something that looks like this…

At first glance, you may not realize the problem with this. The content of the inactive tabs is hidden from the print view. In our requirements, we needed to print all the content for each tab, whether it was active or not. Now you begin to see the clash between interactive content and printer friendly widgets.

There is a solution to this problem, but it varies depending on how you setup your widgets. Here are some tips to setup the print view. For printed tabs to work, you need to create some hidden panel headers and utilize some CSS to display the hidden tabs contents. The solution I came up with contains a “Printer Friendly” link which triggers the dynamic CSS changes for printing all the tabs contents.

Add the following HTML to your page where you want the locate the “Printer Friendly” link for the tab widgets.

Printer Friendly Here

Here is the printer friendly window that is created after clicking on the “Printer Friendly” link.

Here is the jQuery script that enables the printer-friendly jQuery UI tabs to happen.

$(function() {
	        $("#tabs").tabs();

	        // remove any print headers that we may have added
	        $("div.printHeader").remove();

	        // assign our id for print navigation removal
	        $("#tabs>ul").each(function() {
	            $(this).addClass("tab-nav");
	        });

	        // create printer friendly tab view
	        $("#tabs>ul>li>a").each(function() {
	            // what tab is this?
	            var tabNum = $(this).attr("href").replace("#", "");

	            // get our content for this tab
	            var tabContent = $("div[id=" + tabNum + "]");

	            // prepend our print header along with tab theme style
	            $(tabContent).before("
\n" +
    	                            "
\n" +
	                                    "
" + $(this).text() + "

\n" +
	                                "


\n" +
	                            "

\n");
	        });

	        drawPrinterFriendly(); // creates printer friendly links
	    });

	    // Prints contents of a dialog
	    // source: http://www.endusersharepoint.com/2008/12/09/jquery-for-everyone-print-any-web-part/
	    // remarks: added removal of printer friendly link
	    function printDialog(tagid, title) {
	        if (tagid) {
	            var CSSContent = ".printInfo,.tab-nav { display:none;}\n.ui-tabs .ui-tabs-hide,.printHeader { display: block !important; }\n";
	            var printCss = "


";
	            // build html for print page
	            // remarks: we use parent here since the dialog is in a wrapped container
	            var html = "\n\n" + $("head").html() + "\n" + printCss + "\n\n\n" + $("#" + tagid).parent().html() +
                    "\n\n";
	            var printWP = window.open("", "printWebPart"); //open new window
	            printWP.document.open();
	            //insert content
	            printWP.document.write(html);
	            printWP.document.close();
	            //open print dialog
	            printWP.print();
	        }
	    }

	    // creates printer friendly link for matching dialog H3 tags
	    function drawPrinterFriendly() {
	        // find all dialogs by their TD
	        var tags = $("*[id^='dialog-']");
	        // loop through dialogs
	        tags.each(function() {
	            //get id for print function
	            var tagid = $(this).attr("id");
	            //append an image with onClick event
	            $(this).find("h3").html("").append(
                        "
" +
                        "  Printer Friendly" +
                        "  " +
                        "

"
                    );
	        });
	    }

You can find the entire solution here. This solution can easily be adapted to work with other widgets (dialogs, accordions, etc.) with the inclusion of the H3 tag inside a div with id prefix “dialog-”. Possibly in the future I will create a jQuery plugin that encapsulates this functionality for simple integration into your site. Have you found a better approach for printing select portions of a page containing jQuery widgets?