crabbly / print.js Goto Github PK

I currently have a button that executes printJS("Url"), but if you run in a browser that does not have PDF support, IE11 with no PDF reader on the system the button does nothing at all.

So a function that could check if there is PDF support and allowing me to hide my button would be great!

No matter what I'm doing it won't change anything CSS wise when doing an HTML print, any advice or tips @crabbly

my pdf file name: my pdf # 11-1111.pdf
when I using the code
printJS('uploads/pdf/my pdf # 11-1111.pdf');

didnt work, can you check?

Thanks.

Hi,

Is there a way to control when server responds, for example, code "404 not found", when I attempt to request a PDF (they are generated dinamically from server) ?

I have tested, and it shows a print preview for a "404 not found page". It should be very ussefull if it can call a callback when some error occurs.

thanks a lot.

The project I'm currently working on would benefit greatly from the ability to use Multi Column Layouts in CSS due to the nature of printing a sheet and having it folded over when in use so overflow from column 1 goes into column 2 without starting a second page.

Thanks,
Anthony

Expecting for bower package, as this is a front package. we can have this at front end.

I cant seem to get page breaking to work properly by displaying a div on multiple pages.

here is the code

html :

<div id ="JobSheet">
<table>
columns
</table>
</div>

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

some help would be greatly appreciated.

I'm trying to import the lib in es6 like this:

import printJS from 'print.js'
printJS()

But I get:

Uncaught Error: Cannot find module "print.js"
    at webpackMissingModule

Tried it on the latest v1.0.18 version

We need to make it print preview at larger size

please me out this

In mobile Safari (I am testing on iOS 10.3.1) only the first page of a multi page Pdf gets printed.

Any idea how to fix this?

Hi, I am having the problem that I get the printing dialog but it doesn't display the pdf I want to print in the preview of the dialog.

That's my code:
$(function(){ $("#print").click(function(){ var pdf_link = "invoice/RE_<? echo $variable;?>.pdf"; printJS(pdf_link); }); });

It's not because of a wrong pdf_link, cause if I use a wrong link, it shows an error in the printing dialog preview. So I assume that the link is found, but the pdf isn't displayed.
Looking forward to your help!!
Thanks!

When I add the css style in the print text like the title said text-decoration: 'line-through' , It doesn't work.

Demo image printing preview shows blank page.
OSX 10.11.6
Safari 10.0.3

It's common practice to export the module when used from npm rather than affixing it to the global object.

This should work:

import printJS from 'print.js'
printJS()

This should also work:

const printJS = require('print.js')
printJS()

This is not ok:

import 'print.js'
window.printJS()

The main key in package.json point to the wrong file. This cause require('print.js') to return an error.

anyone tried using nested JSON data??

I have implemented basic page-break support for html printing in a branch (break-support) of my fork. The need arises from trying to control page-breaks when printing large sections of html.

I have tested this on Chrome, FF, and IE. Support for page-break-* and break-* is not uniform across all browsers, and even more so when it comes to the supported values for page-break-*. In my case I have strict control over use of page-break-*/break-* (I'm only using always and avoid), and I could see how a more robust implementation of this feature could become quite cumbersome. So this may not be a road you want to travel down, but just wanted to let you know it's there if you'd like to take a look. Let me know if you'd like a pull request.

For cross-browser support of page breaks, for example, I would apply a class like the following:

.page-break {
    page-break-after: always;
    page-break-inside: avoid;
    page-break-before: avoid;
    break-after: always;
    break-inside: avoid;
    break-before: avoid;
}

For certain rich text editors, such as CKEdtior, the iframe containing content does not have an ID. Instead, content is accessed using a call like:

CKEDITOR.instances['my_editor'].getData()

It would be beneficial to allow an expression to be evaluated and its result printed

printJS({printable: CKEDITOR.instances['my_editor'].getData(), type:'html'})

If this is something of value we can discuss design and I can likely find time to work on it and issue a pull request.

@baransu

i had add library in html + js project , add to head like :
`

<script src="mysets/print/js/print.js"></script>

it show error : Uncaught ReferenceError: printJS is not defined

whether it need initialize , and how to do it

thanks

Hi I'm trying to print a embedded PDF in edge, this seems like a impossible task.
I tried your solution and it at least shows the Print dialog but the content is just a big black frame with a small black box in it.
Same happens when I use the example on your page.

For now PrintJS lib exports content to window.PrintJS variable.
It is unusable when your project is using ES6 modules.

Example how to pretty ES6 modules are looks:

// In PrintJS lib:
export function print (options) {
    // ...
}

export default class PrintJS {
    // ...
}

// In our module:
import { print } from 'printjs';

// ...

print({ /* ... */ });

And you can make an old-style export:

import { PrintJS } from 'printjs';

winodw.PrintJS = PrintJS;

That is easy. :)

There are three code snippets within the "Download and install" section at http://printjs.crabbly.com/#cdn
And every time I refresh the browser page their content changes!
Sometimes they contain console command lines, sometimes they contain HTML markup sources.
But they are totally supposed to be stable, while in fact they are not.
What causes such behavior?

Hi there,
Thank you for creating this awesome library to make printing HTML so easily.
I tried it and printed a div with id only, it works very well.
But it will be really great if you can add another feature that allows us to print multiple pages?
For example, I have a list of results. Each result is a container, and it can shows as a page when printing.

<!DOCTYPE html>
<html>
<body>
    <div class="results">
        <div class="result">
            <h1>Student Name: student 1</h1>
            <p>Score: 100%</p>
        </div>
        <div class="result">
            <h1>Student Name: student 2</h1>
            <p>Score: 90%</p>
        </div>
        <div class="result">
            <h1>Student Name: student 3</h1>
            <p>Score: 80%</p>
        </div>
        <div class="result">
            <h1>Student Name: student 4</h1>
            <p>Score: 70%</p>
        </div>
    </div>
</body>
</html>

So can we use the library like this:

<button type="button" onclick="printJS('.results, 'html')">
    Print Results
 </button>

Once again, sincerely appreciate for your contribution to web world.
Please do let me know any updates regarding this ya.

How can i add or import css . I used media query but it wont take

Hi,

I want to print text file with form feed. I made some changes and able to print it. But the problem is that I could not do page break even my text file contains form feed.

Please help me in resolving this

It would be nice to allow for the modalMessage to be HTML code. This way loading gifs can be used or, in my case, font awesome. I tried to set modalMessage to '', but this is printed out instead of the image.

According to the https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children
getting children on SVG element is not supported in IE, however, in printjs has the code

let children = currentElement.children
if (children.length) {
  this.loopNodesCollectStyles(children)
}

and this result a failure as children is null in IE.
Could you please be able to add a null check to the condition so it does not result in failure in IE whenever there is a SVG tag.

Hi,

I'm trying to use Print.js to print pictures without border.
I tried both, printing images and PDFs but with no luck, also setting honorMarginPadding to false does not seem to help.
printJS({printable: "../images/print.pdf", honorMarginPadding: false})

Is there a way I can print borderless or is this just not supported?

Thanks,
Andy

I'm trying to print on IE and URL is blank

The preview shows blank page when I click a print icon on any of the images. I'm having a similar issue on my site. Was this intended?

http://printjs.crabbly.com/#image

When I try to print a div element using the 'html' method in IE 11, it prints the entire page instead of just the element. I get this same result when clicking on the "Print Form" buttons in the "HTML Printing" section of your website at http://printjs.crabbly.com/

I am using IE version 11.545.10586.0 on Windows 10 Enterprise. This is also happening on one of our customers, although I haven't gotten their environment information yet.

Any idea what might be causing this behavior? Is there any other information that I can provide that might give more insight to the cause?

Thank you,
Jonathan

I'm using create-react-app and my build fails during uglifying.

static/js/main.1202540e.js from UglifyJs
SyntaxError: Unexpected token punc «(», expected punc «:» [./~/print.js/src/js/browser.js:3,0]

Is there any solution to this problem? I'm looking into mentioned file and it all looks fine.

Hi,

How to use repeatable page headers and footers for all the pages ?

Kindly help me.

Thank you.

Can i print a landscape PDF instead of the Portrait by default?

Thanks

I'm using Vue.js:

<div id="print-area"> <img v-bind:src="currentInvoice.image"> </div>
this above code will dynamically generate a img into #print-area.
and i use the function printJS('print-area','html'), it's not working, just a blank page unless refresh the page.
so, coulid it print the content dynamically like printJS($('#print-area'),'html').

All of the code samples on the printjs website (http://printjs.crabbly.com/) are not showing because the HTML "<" and ">" characters have not been escaped. Instead of showing the code, the browser is attempting to parse the code and the boxes that are supposed to provide documentation are just blank.

I have loaded the analytics.js, print.js and print.css
Click the button , i just call the method printJS('docs/PrintJS.pdf')

It will download the PDF. I need to print the PDF file without opening the file.
Kindly guide me.

Error in below line

import * as browser from './browser'

It is not really an issue, but a question.
I have a requirement to print 2 or 4 same size images on a single A4 page, all automatically aligned.
Is it possible with your API?

Thanks

When I using the code :
printJS({printable:'http:\\example.edu\print',type:'pdf', showModal:true'});

printable link to and other php page to print. When it is on Chrome PC everything is working fine but when on mobile, page print on the current page but the not page that we have link on printable.

Thanks.

This can be resolved by adding semicolon, and function, like so...

Tested

• IE 11.0.9600.18537 Update Version 11.0.38
• FF 51.0.1 (32-bit)
• Chrome 55.0.2883.87

This may be related to the version of webpack ("webpack": "^1.13.2") that I'm using. I don't know. Pull request incoming.

Hi,

This is more of a question than an issue, but I would really appreciate if you could find time to consider it.

It seems like the inline styling is removed/ignored, at least my output is not styled in any way.
Is there any way of preserving the inline styling?

-Øyvind

I am having a tough time getting this to work with an image in firefox 53.0a2 dev edition.

c.prototype.image = function() {
        var e = document.createElement("img");
        e.setAttribute("style", "width:100%;"), e.setAttribute("id", "printableImage"), e.src = this.params.printable;
        var t = this,
            r = document.createElement("div");
        if (r.setAttribute("style", "width:100%"), p.isFirefox()) {
            var a = document.createElement("canvas");
            a.setAttribute("width", e.width), a.setAttribute("height", e.height);
            var n = a.getContext("2d");
            console.log("image path", this.params.printable);
            console.log("image encoded", a.toDataURL("JPEG", 1));
            n.drawImage(e, 0, 0), e.setAttribute("src", a.toDataURL("JPEG", 1))
        }

Console logs:
image path "/images/coupon.jpg"
image encoded "data:,"

Example images on your site not printing either.

line 293 of print.js
//append iframe element to document body
documentBody.appendChild(this.printFrame);

is saying
Uncaught TypeError: Cannot read property 'appendChild' of undefined

on inspection using chrome debugger, this.printFrame is returning undefined, maybe somethings wrong with getting printFrame? thanks

I guess there should be a isFirefox call, not just a check for function exists.
https://github.com/crabbly/Print.js/blob/master/src/print.js#L223

It seems can't print dynamic generated barcode.

What browsers and version are supported?

When using bootstrap 3.3.7 and any of the column utility classes (col-XX-XX) these tags will not be displayed in a print view.

Demo'd here: http://plnkr.co/edit/ggovSeSLm7RVpA7iAkNL

Issue just started occurring with the latest version of chrome (59.0.3071.86)

Local investigation reveals this to be an issue with the float style on these classes. If I change my bootstrap column utility classes to instead use (float: none;) then they appear in the print view.

Is there a way to ignore certain other HTML elements whilst using the html type?

I'd like to be able to print a DIV however there is one particular element I'd like to ignore.