| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291 |
- /*
- * printThis v1.9.0
- * @desc Printing plug-in for jQuery
- * @author Jason Day
- *
- * Resources (based on) :
- * jPrintArea: http://plugins.jquery.com/project/jPrintArea
- * jqPrint: https://github.com/permanenttourist/jquery.jqprint
- * Ben Nadal: http://www.bennadel.com/blog/1591-Ask-Ben-Print-Part-Of-A-Web-Page-With-jQuery.htm
- *
- * Licensed under the MIT licence:
- * http://www.opensource.org/licenses/mit-license.php
- *
- * (c) Jason Day 2015
- *
- * Usage:
- *
- * $("#mySelector").printThis({
- * debug: false, * show the iframe for debugging
- * importCSS: true, * import page CSS
- * importStyle: false, * import style tags
- * printContainer: true, * grab outer container as well as the contents of the selector
- * loadCSS: "path/to/my.css", * path to additional css file - us an array [] for multiple
- * pageTitle: "", * add title to print page
- * removeInline: false, * remove all inline styles from print elements
- * printDelay: 333, * variable print delay
- * header: null, * prefix to html
- * footer: null, * postfix to html
- * base: false, * preserve the BASE tag, or accept a string for the URL
- * formValues: true * preserve input/form values
- * canvas: false * copy canvas elements (experimental)
- * doctypeString: '...' * enter a different doctype for older markup
- * });
- *
- * Notes:
- * - the loadCSS will load additional css (with or without @media print) into the iframe, adjusting layout
- *
- */
- ( function ( $ ) {
- var opt;
- $.fn.printThis = function ( options ) {
- opt = $.extend( {}, $.fn.printThis.defaults, options );
- var $element = this instanceof jQuery ? this : $( this );
- var strFrameName = 'printThis-' + new Date().getTime();
- if ( window.location.hostname !== document.domain && navigator.userAgent.match( /msie/i ) ) {
- // Ugly IE hacks due to IE not inheriting document.domain from parent
- // checks if document.domain is set by comparing the host name against document.domain
- var iframeSrc =
- 'javascript:document.write("<head><script>document.domain=\\"' +
- document.domain +
- '\\";</s' +
- 'cript></head><body></body>")';
- var printI = document.createElement( 'iframe' );
- printI.name = 'printIframe';
- printI.id = strFrameName;
- printI.className = 'MSIE';
- document.body.appendChild( printI );
- printI.src = iframeSrc;
- } else {
- // other browsers inherit document.domain, and IE works if document.domain is not explicitly set
- var $frame = $( "<iframe id='" + strFrameName + "' name='printIframe' />" );
- $frame.appendTo( 'body' );
- }
- var $iframe = $( '#' + strFrameName );
- // show frame if in debug mode
- if ( ! opt.debug )
- $iframe.css( {
- position: 'absolute',
- width: '0px',
- height: '0px',
- left: '-600px',
- top: '-600px',
- } );
- // $iframe.ready() and $iframe.load were inconsistent between browsers
- setTimeout( function () {
- // Add doctype to fix the style difference between printing and render
- function setDocType( $iframe, doctype ) {
- var win, doc;
- win = $iframe.get( 0 );
- win = win.contentWindow || win.contentDocument || win;
- doc = win.document || win.contentDocument || win;
- doc.open();
- doc.write( doctype );
- doc.close();
- }
- if ( opt.doctypeString ) {
- setDocType( $iframe, opt.doctypeString );
- }
- var $doc = $iframe.contents(),
- $head = $doc.find( 'head' ),
- $body = $doc.find( 'body' ),
- $base = $( 'base' ),
- baseURL;
- // add base tag to ensure elements use the parent domain
- if ( opt.base === true && $base.length > 0 ) {
- // take the base tag from the original page
- baseURL = $base.attr( 'href' );
- } else if ( typeof opt.base === 'string' ) {
- // An exact base string is provided
- baseURL = opt.base;
- } else {
- // Use the page URL as the base
- baseURL = document.location.protocol + '//' + document.location.host;
- }
- $head.append( '<base href="' + baseURL + '">' );
- // import page stylesheets
- if ( opt.importCSS )
- $( 'link[rel=stylesheet]' ).each( function () {
- var href = $( this ).attr( 'href' );
- if ( href ) {
- var media = $( this ).attr( 'media' ) || 'all';
- $head.append(
- "<link type='text/css' rel='stylesheet' href='" + href + "' media='" + media + "'>"
- );
- }
- } );
- // import style tags
- if ( opt.importStyle )
- $( 'style' ).each( function () {
- $( this ).clone().appendTo( $head );
- } );
- // add title of the page
- if ( opt.pageTitle ) $head.append( '<title>' + opt.pageTitle + '</title>' );
- // import additional stylesheet(s)
- if ( opt.loadCSS ) {
- if ( $.isArray( opt.loadCSS ) ) {
- jQuery.each( opt.loadCSS, function ( index, value ) {
- $head.append( "<link type='text/css' rel='stylesheet' href='" + this + "'>" );
- } );
- } else {
- $head.append( "<link type='text/css' rel='stylesheet' href='" + opt.loadCSS + "'>" );
- }
- }
- // print header
- if ( opt.header ) $body.append( opt.header );
- if ( opt.canvas ) {
- // add canvas data-ids for easy access after the cloning.
- var canvasId = 0;
- $element.find( 'canvas' ).each( function () {
- $( this ).attr( 'data-printthis', canvasId++ );
- } );
- }
- // grab $.selector as container
- if ( opt.printContainer ) $body.append( $element.outer() );
- // otherwise just print interior elements of container
- else
- $element.each( function () {
- $body.append( $( this ).html() );
- } );
- if ( opt.canvas ) {
- // Re-draw new canvases by referencing the originals
- $body.find( 'canvas' ).each( function () {
- var cid = $( this ).data( 'printthis' ),
- $src = $( '[data-printthis="' + cid + '"]' );
- this.getContext( '2d' ).drawImage( $src[ 0 ], 0, 0 );
- // Remove the mark-up from the original
- $src.removeData( 'printthis' );
- } );
- }
- // capture form/field values
- if ( opt.formValues ) {
- // loop through inputs
- var $input = $element.find( 'input' );
- if ( $input.length ) {
- $input.each( function () {
- var $this = $( this ),
- $name = $( this ).attr( 'name' ),
- $checker = $this.is( ':checkbox' ) || $this.is( ':radio' ),
- $iframeInput = $doc.find( 'input[name="' + $name + '"]' ),
- $value = $this.val();
- // order matters here
- if ( ! $checker ) {
- $iframeInput.val( $value );
- } else if ( $this.is( ':checked' ) ) {
- if ( $this.is( ':checkbox' ) ) {
- $iframeInput.attr( 'checked', 'checked' );
- } else if ( $this.is( ':radio' ) ) {
- $doc
- .find( 'input[name="' + $name + '"][value="' + $value + '"]' )
- .attr( 'checked', 'checked' );
- }
- }
- } );
- }
- // loop through selects
- var $select = $element.find( 'select' );
- if ( $select.length ) {
- $select.each( function () {
- var $this = $( this ),
- $name = $( this ).attr( 'name' ),
- $value = $this.val();
- $doc.find( 'select[name="' + $name + '"]' ).val( $value );
- } );
- }
- // loop through textareas
- var $textarea = $element.find( 'textarea' );
- if ( $textarea.length ) {
- $textarea.each( function () {
- var $this = $( this ),
- $name = $( this ).attr( 'name' ),
- $value = $this.val();
- $doc.find( 'textarea[name="' + $name + '"]' ).val( $value );
- } );
- }
- } // end capture form/field values
- // remove inline styles
- if ( opt.removeInline ) {
- // $.removeAttr available jQuery 1.7+
- if ( $.isFunction( $.removeAttr ) ) {
- $doc.find( 'body *' ).removeAttr( 'style' );
- } else {
- $doc.find( 'body *' ).attr( 'style', '' );
- }
- }
- // print "footer"
- if ( opt.footer ) $body.append( opt.footer );
- setTimeout( function () {
- if ( $iframe.hasClass( 'MSIE' ) ) {
- // check if the iframe was created with the ugly hack
- // and perform another ugly hack out of neccessity
- window.frames[ 'printIframe' ].focus();
- $head.append( '<script> window.print(); </s' + 'cript>' );
- } else {
- // proper method
- if ( document.queryCommandSupported( 'print' ) ) {
- $iframe[ 0 ].contentWindow.document.execCommand( 'print', false, null );
- } else {
- $iframe[ 0 ].contentWindow.focus();
- $iframe[ 0 ].contentWindow.print();
- }
- }
- // remove iframe after print
- if ( ! opt.debug ) {
- setTimeout( function () {
- $iframe.remove();
- }, 1000 );
- }
- }, opt.printDelay );
- }, 333 );
- };
- // defaults
- $.fn.printThis.defaults = {
- debug: false, // show the iframe for debugging
- importCSS: true, // import parent page css
- importStyle: false, // import style tags
- printContainer: true, // print outer container/$.selector
- loadCSS: '', // load an additional css file - load multiple stylesheets with an array []
- pageTitle: '', // add title to print page
- removeInline: false, // remove all inline styles
- printDelay: 333, // variable print delay
- header: null, // prefix to html
- footer: null, // postfix to html
- formValues: true, // preserve input/form values
- canvas: false, // Copy canvas content (experimental)
- base: false, // preserve the BASE tag, or accept a string for the URL
- doctypeString: '<!DOCTYPE html>', // html doctype
- };
- // $.selector container
- jQuery.fn.outer = function () {
- return $( $( '<div></div>' ).html( this.clone() ) ).html();
- };
- } )( jQuery );
|