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 detail. 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

See online demo and code

The markup used for this example:

 

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

As 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:

See online demo and code

You can see, 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 from the patent document or not. The false will not.

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, have a look:

See online demo and code

The jQuery code for this demo:

 

Get the complete code from the demo page.

Credit and plug-in download link: DoersGuild