Giter Club home page Giter Club logo

jquery.print's Introduction

jQuery Print Plugin

jQuery.print is a plugin for printing specific parts of a page

Usage

Include it in your HTML after importing jQuery, like:

	<script type="text/JavaScript" src="path/to/jquery.print.js"></script>

Use it like:

	$("#myElementId").print(/*options*/);

or

	$.print("#myElementId" /*, options*/);

You can submit the options object like:

	$("#myElementId").print({
        	globalStyles: true,
        	mediaPrint: false,
        	stylesheet: null,
        	noPrintSelector: ".no-print",
        	iframe: true,
        	append: null,
        	prepend: null,
        	manuallyCopyFormValues: true,
        	deferred: $.Deferred(),
        	timeout: 750,
        	title: null,
        	doctype: '<!doctype html>'
	});

Currently this plugin supports the following options:

globalStyles

  • Default: true
  • Acceptable-Values: Boolean
  • Function: Whether or not the styles from the parent document should be included

mediaPrint

  • Default: false
  • Acceptable-Values: Boolean
  • Function: Whether or not link tags with media='print' should be included; Over-riden by the globalStyles option

stylesheet

  • Default: null
  • Acceptable-Values: URL-string or Array of URL-strings
  • Function: URL of an external stylesheet to be included

noPrintSelector

  • Default: ".no-print"
  • Acceptable-Values: Any valid jQuery-selector
  • Function: A selector for the items that are to be excluded from printing

iframe

  • Default: true, creates a hidden iframe if no-vaild iframe selector is passed
  • Acceptable-Values: Any valid jQuery-selector or Boolean
  • Function: Whether to print from an iframe instead of a pop-up window; can take the jQuery-selector of an existing iframe as value

append/prepend

  • Default: null
  • Acceptable-Values: Any valid jQuery-selector or HTML-text
  • Function: Adds custom HTML before (prepend) or after (append) the selected content

manuallyCopyFormValues

  • Default: true
  • Acceptable-Values: Boolean
  • Function: Should it copy user-updated form input values onto the printed markup (this is done by manually iterating over each form element)

deferred

  • Default: $.Deferred()
  • Acceptable-Values: Any valid jQuery.Deferred object
  • Function: A jQuery.Deferred object that is resolved once the print function is called. Can be used to setup callbacks - see wiki

timeout

  • Default: 750
  • Acceptable-Values: Time in Milliseconds for setTimeout
  • Function: To change the amount of max time to wait for the content, etc to load before printing the element from the new window/iframe created, as a fallback if the load event for the new window/iframe has not fired yet

title

  • Default: null, uses the host page title
  • Acceptable-Values: Any single-line string
  • Function: To change the printed title

doctype

  • Default: '<!doctype html>'
  • Acceptable-Values: Any valid doctype string
  • Function: To prepend a doctype to the printed document frame

Tested with

jQuery

Browsers

  • Google Chrome - v 20, 26, 48, 55
  • Internet Explorer - v 10, 11
  • Firefox - v 35

License

CC-BY.

Demo

jQuery.print/demo

jquery.print's People

Contributors

ahmadsoe avatar anterodev avatar bryant1410 avatar lancescole avatar paul-moura avatar sselvara avatar steven777400 avatar vileen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jquery.print's Issues

Problem loading Global Styles

Hello guys, I have a problem with loading Global Styles only works in my localhost server, but if I
deplot this in a server it stops working, the Global Styles in Chrome Console only says 'Pending' but doesn't load Images and Styles.

Someone resolved it?

This is a example:

captursaa

Thanks

Printing in firefox fails

Printing in firefox 37 does not work.

Adding this code in the try-catch at line 132 makes it work again:

var printed = w.document.execCommand('print', false, null);
if (!printed) {
w.print();
}

Blowing up after about 10 pages in IE11

We are printing approx. 30 printed pages of HTML as PDF. It looks good until page 10, when we see the below and nothing else prints. On Chrome, with all the same code, it prints fine. FF also has a similar issue but sooner, at 3 pages. This is from Windows 7, jQuery 1.11, jQuery print 1.3.3. Any thoughts?

ERROR: invalidaccess
OFFENDING COMMAND: put
STACK:
/116
1
[/.notdef /.notdef /.notdef /.notdef /.notdef /.notdef /.notdef /.notdef
/.notdef /.notdef /.notdef /.notdef /.notdef /.notdef /.notdef /.notdef
/.notdef /.notdef /.notdef /.notdef /.notdef /.notdef /.notdef /.notdef
/.notdef /.notdef /.notdef /.notdef /.notdef /.notdef /.notdef /.notdef
/space /exclam /quotedbl /numbersign /dollar /percent /ampersand /
quoteright /parenleft /parenright /asterisk

Orientation

Dear sir,

I have implemented your print solution succesfully, great piece of work!

I would like to make a suggestion to add an option to set the orientation of the print to landscape or portrait.

Kind regards,

Jos de Nijs

Problem with show all map.

                       .mapstyle {
                           height: 100%;
                           height: -webkit-calc(100% - 69px);
                           height: -moz-calc(100% - 69px);
                           height: calc(100% - 74px);
                           margin-left: 420px;
                       }

div id="map" class="mapstyle"

not show all map...

problem with css 3

Hi,

I found one issue with this plugin, Print preview doesn't show css style like background-image,transform,background colour etc. Please give me a soulution

Mixed up append & prepend

When checking the demo around element4, you mixed up append with prepend. append place the text/element after the conent, prepend places on first place before the element.

Background color on table caption & JQuery Charts not showing

Hello,

I have a separate CSS that I called using stylesheet option, it contains a rule that sets the background color of the table caption. Also, I have a chart (JQPlot Chart).

The problem now is when I print, the chart is blank.. only the tables, and the table caption background is not shown (I was expecting a blackground color with white text, but I only got white background with black text).

I do not know what to set to have it look like I wanted it to.

THanks

No print dialog

So, I've setup things and it's working fine outside of iframe mode. However, in iframe mode, while it does add the iframe to the DOM, it doesn't trigger the print dialog. Any ideas?

I should mention that I'm using FF48.0a2

Sometimes the print preview appears blank

Trying to print a barcode with some Text values. But sometimes the print preview appears blank. Once I reload the page it works. Why is this happening? How to overcome this ?

print iframe page

This is not an issue really, but I didn't find any other way to contact you.

Is it possible:

  1. to print an iframe page (on the same domain, so no cross-domain issues)
  2. to print specific part of that iframe page (for example
    with id selector)

Don't understand. can you help?

Hello Print team,

I copied and pasted the code below in a html5 page but nothing happens. What am I missing.
We included the necessary script references.
<div id="ele1" class="a"> <h3>Element 1</h3> <p> Some random text. </p> <button class="print-link no-print" onclick="jQuery('#ele1').print()"> Print this </button> </div>
Kind regards,
Mario

License

Hi,

Running this plugin through Uglify via RequireJS will strip the license information from the minified file.

Please add JSDoc-style @license comment to preserve this information. Example

Line 1 would for example become:

/* @preserve jQuery.print, version 1.0.3

Show Url in Printing

Sir,

Using jQuery.print.js When printing a table including link [ one colomn as <a href="..." type] , In printing time the corresponding url is displayed on printing page.
I Want to avoid That Url.please help me

not tranfer values from forms

Hello friend, I am using the script to print the contents of a div, the content is a form that is empty originally, then the user fills data and the idea is to print the form and with the data, but when printing, the print all empty fields, not working as a windows.print (). any solution for this?

Print multiple selectors

Hi, thanks for the great plugin!

I have two simple questions, since I don't have an printer, so I can't really test.

  1. Can I print multiple div's, for example
    $('#print-content', #print-content2).print();
  2. Can I print elements that are set to display:none ?

Thanks

Plugin randomly failing in Iframe mode

Hey guys, thank you for putting the plugin together. I have noticed both in development and in your own example page that when in iframe mode, the print screen will randomly be blank when printing. I was unable to track down what might be causing this. I am on Mac, El Capitan, Chrome v 48.0.2564.116.

How to use the page break with the plugin

I'm trying to use a CSS to make a page break. Follows suit:

HTML:

<a href="#" class="print">print</a>
<div id="print">
<div id="first">
content
</div>
<div id="second">
content
</div>
</div>

CSS:

@media print {
#first{
page-break-after: always;
}
}

I also tried
@media print {
#second{
page-break-before: always;
}
}

js

$(document).on('click','.print', function() {
$('#print').print();
});

Can you help me? Please.

Thank you

new window - not tab

It'd be a great addition to have the non-iframe mode open a new window and not a new tab. Also, setting the width/height of that window would be great.

scroll Issue

I have table which have scroll. If i print that table then it doesnot handle scroll

console error jquery not defined

First of all - love what you done, has solved a problem I had with printing all content in a modal window - however kept getting Console error using

<button class="print-link" onclick="jquery.print('#sectiontoprint')">PRINT</button>

(index):368 Uncaught ReferenceError: jquery is not defined
My solution is

    <button a href="javascript:void(0);" class="print-link">PRINT</button>

All works plus no Console error
When checking your demo it is console error free

Curious as to why I was getting the ReferenceError: jquery is not defined?

Checked checkboxes where printed as unchecked

Hi!
I got a weird problem. I cannot print checked checkboxes. For example we got a list of bookings and there is a checkbox in each row to show if the booking has been paid or not.

When I try to print the list, none of the checkboxes are checked in the preview of the printer.
Does anybody know, why this is happening?

thx!

Pagination possible?

First of alle - thanks for your work! It is a simple but nice plugin.

Do you think it is possibe to get a pagination done with it? I would like to auto-append "Page X of Y" at every new page.

Any ideas?

How to print in landscape mode by default.

I have to print a page content who has bigger content in width want to print it in landscape mode by default but i am not able to find any option to print in landscape mode by default.

Won't get changed form values from textareas...

Hi, I have included this code on my page and it will print what is on the page wonderfully, with one exception: I have a couple of textareas on the page that I need to put text into and have that print with the page, but the values will not get printed. Whatever values those textareas hold at page load (one of them has default values) WILL print, but if I make any changes to the content of those textareas, those will NOT print, only the original copy will. I have checked that manuallyCopyFormValues is set to true, but no luck. Any ideas?

IE9 not printing border-radius, alpha transparent background-color, and semi-transparent SVG paths

Thank you for great plugin - smart idea to inject content into iframe and print that.

Noticed some problems with Internet Explorer 9 not printing SVG paths and marker clusters with backgroundcolor: rgba() and not handling border-radius correctly (while printing Leaflet.js maps using Leaflet-easy-print https://github.com/rowanwins/leaflet-easyPrint). I believe this is because IE9 requires HTML5 doctype to print these things.

Easy fix was to write the DOCTYPE before the content:

            wdoc.open();
            wdoc.write("<!DOCTYPE html>");
            wdoc.write(content);

Considering pull request, but I dunno if IE9 support is big deal for you or not. Thoughts?

Print beyond one page?

Am using default options except I bumped timeout to 950. Printing in Chrome or IE 11 never goes past first page of the iFrame, the scrollbars are visible in print preview and also print but not any content beyond page 1. Any suggestions? Thanks.

When print, Uncaught ReferenceError: jQuery is not defined appears

Hello,

I have an issue when I use jQuery.print plugin.

When I click to button print, I have following errors :

Uncaught ReferenceError: jQuery is not defined
Uncaught ReferenceError: head is not defined

I think that messages appear because I print a div and in this div, the jQuery and head script are not included.

The script are included in head and not in the div.

It is possible to copy the script of head tag when print a portion of page?

Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.