Troubleshooting Printing Problems

Basic Troubleshooting

There are a few common possibilities when the printout is incorrect:

1. The content may not have loaded by the time we start printing.
2. Firefox has known issues cutting off content in floated containers when printing.
3. Your application CSS may have an overflow: hidden, height: 100%, or other style causing the issue.
4. Long content in certain types of containers, like tables, has pagination problems on some browsers.
5. The content URL may not be handled correctly from the print iframe.
6. A script in your content area may be executing and removing or changing the content you wish to print.

One of the simplest tests for missing print content is to disable the import of CSS, increase the print delay, and remove scripts using a test like this:

$myPrintArea.printThis({
  debug: true,
  importCSS: false,
  importStyle: false,
  printDelay: 5000,
  removeScripts: true
});

If this works, you can try removing the import blocks or the delay to see which direction to go. If it is a style issue, most of these can be resolved with print-only CSS in an @media print { ... } declaration or using an additional print-only stylesheet with the loadCSS option.

You can go a step further and use removeInline: true to even wipe out per-element style attributes, which may be needed if you subscribe to something like the React CSS-in-JS foolishness style.

The debug: true setting leaves the print iframe on the page for you to inspect. This can be helpful to identify problems with CSS or content URLs preventing images or styles from loading.

Canvas content doesn't print

If you are trying to print a canvas element, please remember that canvas support is experimental and is not enabled by default in the 1.x releases. You can turn on canvas printing with the option canvas: true.

How do I set specific page sizes or breaks?

Setting a paper size or page scale is outside the scope of printThis. You can use print stylesheet or @media print {...} media query to set styles and some page break behavior, but the user has the ability to choose the page size and other characteristics in the print dialog after the JavaScript is executed.

If you require fine-grained control over the output format, you might consider generating a PDF with a tool like jsPDF.

I get JavaScript Errors

If the selected area(s) of your page contains scripts, they will run when the content loads in the printThis iframe. It is extremely rare to need a script to run for printing. You can usually resolve script errors during print with the option removeScripts: true.