10 jQuery Print Page Options

Sam Deering
Tweet

Most websites still offer a print style sheet and did you ever wonder how possible is to use jQuery to create a print page button? In this post you will find 10 jQuery-made “print page” button, options and tutorials. Enjoy!

Related Posts:

1. Unobtrusive JavaScript Print Link (with jQuery)

Ideally, we do not want to have things on a page that do not work without JavaScript enabled. So the solution is to write the print link into the DOM using JavaScript, and then attach a click event to the link.


Unobtrusive JavaScript Print Link

Source Demo

2. jqueryprintpage

A simple jQuery plugin to wrap the inner elements matching a given selector in a *print page* link, then add an onclick handler to print the current page.


jqueryprintpage

Source + Demo

3. jqPrint

This plugin is designed upon the well-known jPrintArea, with some improvements and functionalities corrections. Rewritten as true jQuery plugin!


jqPrint

Source + Demo

4. PrintArea – Print section of the page with jQuery

This plugin allows us to indicate which container on the page we want to send to the printer maintaining the original css styles applied to the element being printed.


PrintArea

Source Demo

5. jQuery Printing Plugin

The plugin creates an iframe and print it directly! This way you save yourself (and your users) the hassle of dealing with a new window.


jQuery Printing Plugin

Source Demo

6. jQuery Print Preview Plugin

The jQuery Print Preview plugin is designed to provide visitors with a preview of the print version of a web site. Unlike traditional print previews this plugin brings in all content and print styles within a modal window.


jQuery Print Preview

Source Demo

7. jQuery Print Element 1.2

Sets whether the plugins behavior is to open a popup of the element to print before printing, or to create a hidden iframe. Possible values: ‘iframe’ | ‘popup’


jQuery Print Element

Source Demo

8. Print Part of a Web Page with jQuery

A jQuery plugin to handle the print() functionality. This way, we can make anything on the page printable using a jQuery selector.


Print Part of a Web Page

Source + Demo

9. Easy Unobstructive jQuery Print Page Tutorial

An easier way to create Print This Page buttons, and yes it doesn’t involve an onclick=” event…


Unobstructive jQuery Print Page

Source + Demo

10. Add Print Ability to FancyBox jQuery Plugin

In this tutorial you will learn how to add a nice print button to the FancyBox jQuery plugin.


Print Ability to FancyBox

Source Demo

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://suggest2india.com swapnil kene

    great thanks, i was looking for this since long.

  • kedar

    It’s very help…

  • ganesh

    thanks a lot. it is not working in ie and firefox

  • ganesh

    in ie and firefox its not working

  • http://www.facebook.com/profile.php?id=679358973 Nikola Hamwi Abo Carla

    Very helpful post,
    i had to try them one by one to get what i wanted. And it was:
    6. jQuery Print Preview Plugin

    • Razack

      can you print a div with background image style with this?

  • rvflyer

    does anyone have a print plugin that allows you to set the number of copies in code?

  • Pavan

    I want to open a pdf and print the pdf using jquery can some one help me out on this. Thanks in Advance mail me pavancs045@gmail.com

  • sudo

    have like it! wonderful

  • Marcio

    I dont see instructions to how to use your plugin. How about example page? I’d like to test your plugin but how can i use?

  • Razack

    Can anyone suggests a best plugin that print including all css styles like background-image , colours etc. Thanks in advance

  • laxmi

    thanks so much. it’s very useful. can anyone have idea? how to hide date, url, page number etc on printing page without changing browser page setup?

  • Spencer

    I have tried printArea plugin which is the 4th plugin in this article. It works well, but I am just wondering if I can open the print preview page in a new tab instead of a popup window.

  • restless

    how to link another printable form (in a div form) to a print button?