jQuery Print plug-in for Printing Specific Section of a Webpage

The jQuery plug-in for printing a specific part

Printing a complete web page is not an issue since it is a feature that is provided by browsers. However, in some scenarios, you may need to provide a facility to a visitor for printing only a section of a web page rather than the complete web page.

For example, a specific div element in a page contains the introduction about a topic while the lower part contains the details. You want to let your visitors print the introduction only.

Similarly, the shopping cart items before the purchase is completed should be allowed printing without any other information on that web page like cancel, checkout buttons etc.

You may use the jQuery.print plug-in for printing a specific element from a number of elements in a web page.

A demo of using the print plug-in

In this demo, a textbox is used along with some text in a div element. As you click the button “Print this section with textbox”, the printing page will display the content of the div element which ID is print-demo. The page also contains another div element with text in the paragraph tag, however, it will not print. Have a look:

jquery print

The code:

<!DOCTYPE html>
<html>
<head>
        <style type='text/css'>
        .a {
            background: black;
            color: white;
        }
        .b {
            color: #aaa;
        }
        </style>
</head>
<body>
        <div id="content_holder">
            <div id="print-demo" class="a">
                <h3>Print text in a textbox</h3>
                <p>
                The information in textbox will display!
                <input type="text" size="40" value="Enter any text in text box and press Print button!" />
                </p>
                <button class="print-link no-print" onclick="jQuery('#print-demo').print()">
                Print this section with textbox
                </button>
            </div>
            <div>
            <p><strong>This part of the page will not print.</strong></p>
            <p>
            The speed can be defined in milliseconds or �slow� and �fast�. While the callback function is optional in both methods.
            </p>
            </div>

            

        </div>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script src="js/jQuery.print/jQuery.print.js"></script>


</body>
</html>

You can see, the print function is called on the click event of the button. No other jQuery code is used in this example.

You only need to include the JS file of the plug-in in the <head> section (find the download link below).

A demo of using a few options in jQuery code for printing

When printing a specific part of a web document by using jQuery, you may set a few options in the jQuery code. For example, for hiding the URL from the header, you may use the iframe: false option.  See this example where I used a few other options as well:

As you execute this example, you will see that only the first div’s content is available for printing. Besides, the printing page is displayed without iframe.

The globalStyles option specifies the style to be included in the parent document or not. The false will not.

Complete code:

<!DOCTYPE html>
<html>
<head>
        <style type='text/css'>
        .a {
            background: black;
            color: white;
        }
        .b {
            color: #aaa;
        }
        </style>
</head>
<body>
        <div id="content_holder">
            <div id="print-demo2" class="b">
                <h3>jQuery Show/Hide</h3>
                <p>
                The jQuery show method is used to display the hidden elements in a web page. For example: <br />

                $(�div�).show(speed,callback);<br /><br />

                The $.hide method is used to hide the visible elements:
                </p>
                <button class="print-link no-print">
                Print this element
                </button>
            </div>

            <div>
            <p><strong>This part of the page will not print.</strong></p>
            <p>
            The speed can be defined in milliseconds or �slow� and �fast�. While the callback function is optional in both methods.
            </p>
            </div>


        </div>


        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script src="js/jQuery.print/jQuery.print.js"></script>

       <script type='text/javascript'>
        $(function() {
            $("#print-demo2").find('button').on('click', function() {
                $("#print-demo2").print({
                    globalStyles : true,
                    mediaPrint : false,
                    iframe : false
                });
            });

        });

        </script>
</body>
</html>

A demo of prepend and appending the text

You may also prepend or append the text for the specified printing element. For that, simply use the prepend and append options in the jQuery code. The given text/HTML will be added on top and the bottom of the element:

The jQuery code for this demo:

       <script type='text/javascript'>

        $(function() {

            $("#print-demo2").find('button').on('click', function() {

                $("#print-demo2").print({

                    globalStyles : true,

                    mediaPrint : false,

                    iframe : false,

                    prepend : "A jQuery Tutorial <br/>",

                    append : "<br/>The printing plug-in!"

                });

            });

 

        });

 

        </script>

Credit and plug-in download link: DoersGuild