0

I have print.min.js referenced in my angularjs project. I have it printing successfully (very simple!) for most of my needs. I have run into a case where the browser print dialog does not appear when a user presses my 'Print' button. The issue seems to be related to file size. I don't know the size threshold yet, but it seems after a few pages in length, the process hangs in print.min.js somewhere. Smaller files (2 - 3 pages or so) print without issue. Any thoughts?

Thanks!

Joe

Cheshire
  • 13
  • 4
  • Are you trying to print html, json data or a pdf document? Have you checked your console for any errors? – crabbly Aug 15 '18 at 21:06
  • Feeding html to printJS() for PDF output. No errors in the console. My print function is entered and other than that console.log() call the printJS is the only other line of code in the function. – Cheshire Aug 16 '18 at 01:42
  • I finally let it run for a while. It took about 10 minutes to generate the PDF. The source HTML is about 383kb. It did eventually produce the PDF and the browser print window was displayed. The PDF file is about 160kb. By contrast, about 17kb of HTML takes about 3 seconds to process and yields a PDF about 100kb in size. Is there something I'm doing (or not doing) on my end that's contributing to the efficiency of printJS? – Cheshire Aug 16 '18 at 23:09
  • Got it. When printing large or complex html, it may be better not to process all the computed styles with javascript. Please see my answer. – crabbly Aug 18 '18 at 23:00

1 Answers1

1

By default, Print.js will process the computed styles for each html element. When printing large and / or complex html, this process may take a while. Specially on slower machines.

To prevent this, the library has a parameter scanStyles that can be set to false. However, for this to work properly, you may want to style your html with css classes instead of inline style. Since the library isn't scanning the computed styles, it needs to receive the css you want to use when printing.

For example, when printing an element of id myElement on a page with two attached stylesheets, myStylesheet.css and vendor.css:

printJS(
  {
    printable: 'myElement',
    type: 'html',
    scanStyles: false,
    css: ['myStyleSheet', 'vendor.css']
  }
)

This supports css print media query as well.

You can also pass custom inline style if necessary:

printJS(
  {
    printable: 'myElement',
    type: 'html',
    scanStyles: false,
    css: ['myStyleSheet', 'vendor.css'],
    style: 'h1 { color: blue; }, someClass { font-size: 1rem; }'
  }
)

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

crabbly
  • 5,106
  • 1
  • 23
  • 46
  • Cool. Currently I pass a .css specifically for use with printJS but aIso use a ton of inline styling. I'll move all my inline styling out to the .css as you suggest. Thanks! – Cheshire Aug 19 '18 at 17:56
  • The difference is amazing. As I mentioned, previously it took about 10 MINUTES to generate the PDF from the html I was sending. Having removed all in-line styling and moved it into a css has changed the performance to virtually instant rendering of the pdf. MANY THANKS FOR YOUR SUPPORT!! – Cheshire Aug 20 '18 at 18:13