Printing Specific Content of a Page

By December 21, 2015Blog, Javascript, jQuery
Allure Web Solutions Code Snippet

Sometimes you need to print only a specific section of a page. For that, it’s not enough to use the basic Javascript window.print(). This method will print the entire contents of a page.

What’s a scenario where you would need to print specific contents only? Well…how about not wanting all the header, footer, and sidebar stuff in your print. That seems pretty common enough 🙂

We can accomplish this with purely Javascript, with no need for jQuery or any other plugins. With this method we basically remove the content that isn’t going to be printed in the body, print the remaining content, then place back all of the original content. Below is a little example I put together in CodePen:

See the Pen Print Specific Section of a Page Javascript Only by Mike Doubintchik (@allurewebsolutions) on CodePen.

For an explanation look at the comments in the code.

Alternative Method Using jQuery.Print.js

This method has a lot more options and it’s easier to call the print function, but the additional plugin you need to include does add a little bit of weight to your page. To see a full list of options for this plugin check out the author’s github. Code example below.

See the Pen Print Specific Section of a Page Using jQuery.Print.js by Mike Doubintchik (@allurewebsolutions) on CodePen.

As always the code is commented and if you have any questions, please ask in the comments below.

Mike Doubintchik

Author Mike Doubintchik

More posts by Mike Doubintchik

Leave a Reply