Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
// Create a jquery plugin that prints the given element.
jQuery.fn.print = function(){
// NOTE: We are trimming the jQuery collection down to the
// first element in the collection.
if (this.size() > 1){
this.eq( 0 ).print();
} else if (!this.size()){
// ASSERT: At this point, we know that the current jQuery
// collection (as defined by THIS), contains only one
// printable element.
// Create a random name for the print frame.
var strFrameName = ("printer-" + (new Date()).getTime());
// Create an iFrame with the new name.
var jFrame = $( "<iframe name='" + strFrameName + "'>" );
// Hide the frame (sort of) and attach to the body.
.css( "width", "1px" )
.css( "height", "1px" )
.css( "position", "absolute" )
.css( "left", "-9999px" )
.appendTo( $( "body:first" ) )
// Get a FRAMES reference to the new frame.
var objFrame = window.frames[ strFrameName ];
// Get a reference to the DOM in the new frame.
var objDoc = objFrame.document;
// Grab all the style tags and copy to the new
// document so that we capture look and feel of
// the current document.
// Create a temp document DIV to hold the style tags.
// This is the only way I could find to get the style
// tags into IE.
var jStyleDiv = $( "<div>" ).append(
$( "style" ).clone()
// Write the HTML for the document. In this, we will
// write out the HTML of the current element.;
objDoc.write( "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"\">" );
objDoc.write( "<html>" );
objDoc.write( "<body>" );
objDoc.write( "<head>" );
objDoc.write( "<title>" );
objDoc.write( document.title );
objDoc.write( "</title>" );
objDoc.write( jStyleDiv.html() );
objDoc.write( "</head>" );
objDoc.write( this.html() );
objDoc.write( "</body>" );
objDoc.write( "</html>" );
// Print the document.
// Have the frame remove itself in about a minute so that
// we don't build up too many of these frames.
(60 * 1000)
Copy link

mirdehghan commented Sep 19, 2014

Very good. thanks

Copy link

luzfcb commented Oct 6, 2014

how to use this? Sorry, i'm a JS newbie

Copy link

m0use commented Dec 16, 2015

if in obj, that we print, have some src's objects(in my case it was img), we must wait for load
now, i'm trying to solve this issue

Copy link

danieltenefrancia commented Jan 21, 2016

can we add footer here ?

Copy link

anderson-0812 commented May 6, 2016

How use this whit codeigniter??

Copy link

Justicea83 commented Mar 22, 2018

How do you use it??
No documentation?

Copy link

newtonanbarasu commented Sep 27, 2018

Hi ,
am printing bootstrap modal
I specified width and height on @media print { }
but its showing same modal size (991px) on printing
how to rectify this ??

Copy link

amritlamsal81 commented May 28, 2019

how to use

Copy link

subashdbc commented Jul 26, 2019

This seems to be not working with iPad, how to fix it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment