jasonday / printthis Goto Github PK

Hi! Really like your library!

I found this problem with Chrome and DevExtreme charts.

http://jsfiddle.net/nphwtrrL/

Resize the result window to the maximum and hit the print button. Notice the chart is clipped to the right. Try the same thing in Firefox and the chart is correctly sized.

Is possible I put jquery code on this iframe? because this plugin make everything i need, but sometimes i need insert "${selector}.append on my html but if i make this don't print the append

Hi,

I'm using v 1.5 of your plugin.

I cannot see the selected text of select element, when i print.

http://jsfiddle.net/dJjMz/109/

Please help me in debugging this.

Thank you for such a great plugin! I tested it's basic functionality (print given element) across Firefox, Chrome, IE11-10-9-8 and both "new" and "old" Operas. It works everywhere, but Opera 12. If I call .printThis() on a particular element, it prints whole page.
Jsfiddle: http://jsfiddle.net/dJjMz/2/

Why Opera 12? Because some people didn't like new engine and refuse to move to another browser. D'oh..

BTW, what does comments on that lines mean?

line 26: what (who) is S. Vance?
line 53: "IE works if document.domain is not explicitly set" - this place is executed if browser is not IE, maybe I don't understand something? :)

I am unable to print a table cell "" background color in any browser. The background colors display fine on the screen in the table to be printed. Other CSS table values like border width and font color work fine.

This plug-in only prints a blank page and footer information when printing from Safari in iOS 8.

https://jsfiddle.net/u1pvspqo/

Seems like NPM is the recommended place to host plugins
http://blog.npmjs.org/post/111475741445/publishing-your-jquery-plugin-to-npm-the-quick
I had a lot of trouble finding this library, which is a shame because it was just what I needed.

When using a Bootstrap modal to display a map with a form (so the user can generate directions) the route line doesn't show (in Chrome, Safari, and Firefox -- all Mac OSX 10.9).

It displays in Chrome's Print Preview (printing from the browser menu) but not when using printThis.

My first assumption was it was a scope thing as I was creating a new map object when the modal was launched (thereby showing no route line when the modal is re-opened), but even after changing this the route line still appears in the modal but not when printing.

Any thoughts would be most welcome.

Here's the JS I'm using to trigger printThis:

$('#print_directions').on('click', function(ev) {
        ev.preventDefault();

        $('#printSection').printThis( {
                debug: false,
                importCSS:true,
                printContainer: false,
                pageTitle: "Getting here",
                printDelay: 333,
                header: null,
            });
    });
});

For example, here's Print Preview in Chrome as if I were printing normally;

And here's the Print Preview when using printThis.

Hi,
I'm using the plugin successfully with ff. But with IE I'm facing several problems.

1. Tables aren't printed correctly. The output is printed as one continuous string.
2. When the table is built and displayed via javascript/ajax (not on the original html page), printThis prints the whole page.

-> The IE workaround in the plugin is not touched since window.location.hostname == document.domain

Page Title characters not recognized when I print page part on IE.
In my config:
pageTitle: "Гарчиг",

How to solve this?

Hello,

when I try to print a long HTML table, it isn't printed in full, it just gives the first page, and then it gets cut off.

When using the importStyle option, the <style> tags were being moved to the chile (print) iframe and being removed from the parent. Used a $.clone to resolve.

Hey there,
Would it be possible to get support for style tags? Normally I'd make a pull request, but I've already got a fork of jqprint, and it won't let me make another one. So here's the code change I'm requesting at line 44 of printThis.js:

// import page stylesheets
if (opt.importCSS) $("style, link[rel=stylesheet]").each(function () {
    var $clone = $(this).clone();
    if(this.tagName == 'LINK')
        $clone.attr('media', $clone.attr('media') || "all");
    $doc.find("head").append($clone);
});

Is there a workaround to print in old Opera's?

When printing a page using this plugin I always get "about:blank" at the top right of the page.

I keep getting this error in Internet Explorer v7,8,9,&10
SCRIPT438: Object doesn't support property or method 'printThis'

jQuery('#printPage').click(function () {
    jQuery('#content').printThis();
});

Hello, congratulations for the plugin. I tested in Chrome and IE and it works fine, but not in firefox, is it possible?

Hi Jason,
I am using printThis ( with printDelay: 500 option) in my projects however there is one issue I am frequently facing.
My printing page data is pulled from the server by ajax which is invoice. Sometimes it shows blank page in Chrome if some data is not pulled fully. If I try second time it works fine since the images are cached in the browser.
Since the latest Chrome 46.0.2490.80m update it prints always blank with option printDelay: 500, even 2000.
Anything am I missing? Thank you.
Note: There is no any browser or js error.

Hello there,

First of all thank you to take the time and create this really useful plugin!

I have one question. Do you have any plans to include the minified version of the plugin at your repository? I mean something like: jquery.printThis.min.js with the minified version of the plugin.

Thank you in advance
Johnny

I think it should add this code...

iframe.contentDocument.open();
iframe.contentDocument.close();

Forgive my poor English...

Only parts of a tiled image map are printed in FireFox 17.0.1. Works in IE and Chrome. Here is the code:

<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
<link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" />

<style>
  #map {
    width:100%;
    height:100%;
  }
  .page-map #mapcontent, #map {
    width: 100%;
    height: 100%;
    padding: 0;
  }
</style>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="printThis.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3compact"></script>
<script>
   dojo.require("esri.map");
   dojo.ready(init);

   function init() {
      map = new esri.Map("mainMap", {
         basemap: "streets",
         center: [-122.887, 47.013],
         zoom: 13
      });
   }

   function print() {
      $("#mainMap").printThis();
   }

</script>

<div data-role="page" id="mapPage" style="width:100%;height:100%;overflow:hidden;" data-theme="b">
  <button id="print1_button" onclick="javascript:print()">Print</button>

  <div data-role="content" style="padding:0;width:100%;height:100%;">
    <div id="mainMap"></div>
  </div>
</div>

I'm using this combined with ASP.NET. Data are properly generated and visible. However upon initiating printThis() on div IE gets empty printout (Chrome works ok).

print.css file is correctly loaded but I can't get border-collapse to work, is there any printThis related issue for css? ie are they parsed to some extent?

regards

Would like to be able to reference multiple css files with loadCSS

Hey, maintainer(s) of jasonday/printThis!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library jasonday/printThis is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "jasonday/printThis",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

line 156 should have the quotes by the value as well, otherwise it crashes for complicated values:
$doc.find('input[name="' + $name + '"][value="' + $value + '"]').attr('checked', 'checked');

hi guys, did u know any error calling the function and just erase the dat from the web page, and doesnt print anything?

im using the script for a while, but today something happens, some pages print correctly but a few pages doesnt print anything, im using the same version, the same way to call the function, how can i fix it?

//funcion para imprimir la pantalla
function imprimir_esto(id_tabla){
console.log(id_tabla)
$("#"+id_tabla).printThis({
debug: false,
importCSS: true,
printContainer: true,
loadCSS: "../css/style-print.css",
pageTitle: "",
removeInline: false
});
}

nevermind, for some reason, when i try to triger the function of printing, that was acting like a submit, because i have everything inside form tag.

My Web app path: localhost:8080/turbo.
When I print I get:

Error cannot find : http://localhost:8080/vendor/font-awesome/css/font-awesome.min.css

Its missing turbo path .

Hello,
I have attached the PDF wanted the text container to come below the image.
Having issue the text container is overlapping.
I am using print this version
printThis v1.4

• @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 2014
  Ikea Damage Item Marking.pdf
  and playing around the css and Jquery

CSS:-
.viewport{
position:relative !important;
margin:0 auto;
width:100%;
text-align:center;
height:100%;
display:block;
clear:both;
}
.printNotes {
position: relative !important;
height: 100%;
margin:300px 30px auto;
width: 100%;
top:400px;
display:block;
clear:both;
}
JQuery:-
document.getElementById("print"+i).onclick=function(){
saveToDB();
$(".viewport, #imgNote").printThis();
$("#imgNote").addClass('printNotes');
$(".viewport").addClass('viewportimg');
$(".edit").parent().removeClass("addBgColor");
// $("#imgNote").removeClass('showcontent');
}

add the path
PrintThis.js
// defaults
$.fn.printThis.defaults = {
debug: false, // show the iframe for debugging
importCSS: true, // import parent page css
printContainer: true, // print outer container/$.selector
loadCSS: "css/images_upload/print.css", // load an additional css file
pageTitle: "Ikea Damage Item Marking", // add title to print page
removeInline: false, // remove all inline styles
printDelay: 500, // variable print delay
header: "", // prefix to html
formValues: true // preserve input/form values
};

Thank you for printThis. I'm having only one issue. I'm printing bunches of divs from a window.open that was spawned for a new tab. As the print kicks off something about the iframe changes my spawned layout on the screen..it sort of empties it out. The print format appears fine and is populated but I need a hook somewhere to reload the emptied out layout so that the initial page they were wanting to print looks as it did before. I tried a window.location.reload() but I can't seem to get it in the right spot....it breaks the iframe populate. I wasn't sure where to put it with regard to the timers. I see where the iframe is deleted but it didn't work to try it after that. Any ideas?
Thanks!

Input and textarea value visible in the browser, but not visible on the printout when printing on Firefox 25.0 browser. On IE10 just textarea is visible. Here my codes:
http://pastebin.com/2DbKKm4N
Thanks before.

Could I use this via nodejs?

Discovered a major issue with IE when document.domain is being explicitly set on the page.

Fix will be posted tomorrow.

I Wanna print a div with a background color, but in document not have colors, only border colors

First of all, thanks for this awesome plugin! It's just what I was looking for.

As I implemented the plugin on one of the pages on my site, I found that it worked perfectly right out of the box (hooray!). I then tried to employ it when clicking a button on a modal jQuery UI dialog, but found that when using IE 11 (not sure about earlier versions), the specified element was not printed. Rather, all visible content in the browser viewport was printed (sadness; sniff, sniff).

I think the issue is that since the print iframe is being appended to the "body" element, it doesn't get focus or something when ".print()" is finally executed (or something like that), since the jQuery dialog and its associated overlay div are laying on top of the main page:

(line 55) $frame.appendTo("body");

After banging my head against the wall for hours and cursing IE (not an unusual occurrence), I did a little experiment and added an "appendToEl" option (with a default of "body") to the others in your script:

appendToEl: "body"      // element to which the print iframe is appended

Then, I updated line 55 to read from the option:

$frame.appendTo(opt.appendToEl);

Finally, I updated the call in my document to specify an element that was within the jQuery UI dialog as the one to which the print iframe is appended:

$( "#selectorOfElementToPrint" ).printThis( {appendToEl: "#selectorOfElementInDialog"} );

Worked like a charm! Thought you might want to consider adding this as an option for anyone who finds the need for it, as I did.

Hi

i am using this plugin to print my datatable data but the problem is that if there is large data in tables then only one page print and the rest doesn't and the table appear to be broken at the bottom of that page.

Is there any way that i can print more than one page?

Thanks

Hi,

Is it possible to force printThis() to wait all page elements to load?

I am having issues trying to print elements with font-face using Google Chrome. The first time i try to print, the text is empty, but if i cancel and try again, it is printed fine.

Thanks!

Jason:
The latest build with the new SetTimeout hangs in FireFox. Also, has this plugin been tested from an iPad or Android device to see if it works?

Hello.
I'm using last verion of jQuery and jQuery UI (both 1.11.1).
When I tried to use printThis, when modal jQuery UI dialog is on screen - it print the entire page's content, not only selected.
Link to fiddle: http://jsfiddle.net/4kf6gqqb/4/

Note that the problem is only in Internet Explorer. It's work in FIrefox.

So I'm trying to use this for my asp page.
I included these at the head section:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/36032609/printThis.js"></script>

and this is the division that I want to be printed:

<div id="viewentry" class="modal hide fade " tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
    <div id="viewMdlBody" class="modal-body" style="min-height:400px;">
    </div>
    <div class="modal-footer">
        <button id="btn" >Print</button>
        <button id="createlessBackBtn" class="btn" data-dismiss="modal" aria-hidden="true">Back</button>
    </div>
</div>

And lastly, I fired the event using this:
$(document).ready(function () {
$('#btn').click(function () {
$('#viewentry').printThis();
});
});

But in the end when I go to the console, it says something like this:

Uncaught TypeError: undefined is not a functionStoreVisitView.aspx:57 (anonymous function)jquery-latest.min.js:3 m.event.dispatchjquery-latest.min.js:3 m.event.add.r.handle

Awesome plugin. It's working great for every browser and version I need aside from IE9. I've spent time in debug mode and the iframe is styled correctly with all the styles I've imported, however when the page is actually printed none of the styles are being respected. I'm sure there are IE9 specific bugs when it comes to print styles, but even a basic text-align: center; isn't being respected on my section headings.

Have you seen these issues before or know why this would be the case for that browser?

Thanks!

Hello,

I am using the script to print a barcode, however I would like to print it right in the top left corner and without titles or page numbers. As the user is going to print it on a little sticker printer(Dymo printer) that only has room for the barcode. Here is a screenshot of what I get when printed via IE. Thank you for any help.

Dave

In IE 9 when I set the zoom level of the browser to greater than 100%, the size of the html elements on the print changes. Any way to hard code the width of the div to be printed. I tried setting the width to a point value like "500pt", but it did not work.

This is not an issue in FF and Chrome. All works great in those browers when broswer zoom level is modifed.

The area to print is simply a Div with a responsive image in it

Clicking the printThis button draws up a print dialog...
but the image seems to be ignoring it's PPI and reverting to 72ppi

If you simply save the image and print it, it correctly inherits the resolution

I just can't figure out why using this print method is ignoring resolution. TIA

The <title> tag is being set in the iframe, but nevertheless, the Print headers still show the title of the parent page.

Hello,

I'm using Chrome.
Please check this example I did:

http://lucascotta.comlu.com/newspaper.html

Do you see the big text-image at the beginning of the right column? This comes from an external source and may take some time to load.

At the top, I included the print button with the following JS:

$("#finalPrint").printThis({
    importCSS: true
});

If you try it, you can see that the image is not loaded in the print window.
If I include a printDelay: 500 then the image loads fine.
But the problem is that in my real app, there are about 50 images, and I have to put a big delay such as 6000 so all images are loaded...

Am I doing something wrong? Would you suggest me to do something?

Thanks!!!

Thanks for you making the great plug-in.This plug-in works fine for me. there is a problem about jQuery function Show() and Hide.

Here the thing is that I want to print a receipt.I just don't want to show the div layer of the receipt to user.so I hide the layer when the page loaded .

the script is here.

        function () {
            $("input#printBtn").click(function () {
                $("#myPrintArea").show();
                $("#ifPrint").val('1');
                $("div#myPrintArea").printThis({
                    debug: false,
                    pageTitle: ""
                });
               $("#myPrintArea").hide();
            });
        });```
but I run the script and the print page was blank.is it hidden directly?
Any help will be appreciated.

See the jQuery 1.9 Upgrade Guide.

This is probably related to #26. I initially thought this was an issue strictly with IE9, but I came across it in IE11 as well. On one page of my site, printThis works great in IE11 (still buggy in IE9), but there's another page where printThis doesn't work, and prints the entire page instead in all versions of IE. There aren't any discernible differences. Printing works fine in Firefox and Chrome on all of these pages.

My solution was to replace this:

$iframe[0].contentWindow.focus();
$iframe[0].contentWindow.print();

with

if (document.queryCommandSupported('print')) {
    $iframe[0].contentWindow.document.execCommand('print', false, null);
} else {
    $iframe[0].contentWindow.focus();
    $iframe[0].contentWindow.print();
}

This relies on execCommand('print', false, null) in browsers that support it, and falls back to print() for browsers that don't (Firefox). I haven't performed extensive testing on this yet, but it seems to work for my purposes for now. Any issues with using execCommand('print', false, null)?

Hi, i think this is not a real issue but is there a way in the options to set up the page as landscape instead of portrait?
Thanks