Test Menu

  • Commentary
  • Deals
  • Coupons

Feb 14, 2012

Simple jQuery Print Friendly Page


The following script can be used to take the content from a section of a page, in this case a div, and put the content in a new simplified window.  This is one way to exclude banners and graphics or deal with page layouts that don't  print well.  In the first section, on document ready, the link (or whatever element you like) is selected by the id "linkPrintFriendly" and assigned a function to execute when the element is clicked.  I've also made the cursor a pointer when hovering over the element.  The "printfriendly" function basically grabs html from an element on the page (with the class "theelementtoprint") and puts it in a new window that is opened.  In this example, I'm also hiding a table that I don't want to show in the new window.

I found a very useful example showing the code at http://jsfiddle.net

  <script type="text/javascript">
        $(document).ready(function () {
            $("#lnkPrintFriendly").click(printfriendly);
            $("#lnkPrintFriendly").css("cursor", "pointer");
        });

        function printfriendly() {

            //open a new window or tab
            var w = window.open();

            //include only the content of the center div or rightnocenter div
            var html = $(".theelementtoprint").html();

            //provide a title
            w.document.title = 'Page Title';

            //put the html into the new page
            $(w.document.body).html(html);

            //hide the table
            $(w.document).find("#tblFunctions").hide();

        }
    </script>