How do I print a HTML page dynamicly generated with jquery

Question

I have a dynamicly generated document built using tables, with jquery. The data comes in a json file and it shapes heights everywhere, picture colors, etc. I won't post the entire code because it's massive, but here is a picture:

Whenever I try to print that, the output is this:

As you can see, the canvas is fine but elements like the images and their background-color doesn't show up. The ruler on the left too, that is a background-repeat-y image that doesn't show up as well. (the bottom part is fine, I just didn't include it on the picture)

Here is my doc before the json data:

Why the browser doesn't print what's on the screen correclty? I've tried media print but it doesn't work too.

Answer 1

First, as @rob-moll and @rory-mccrossan suggested, make sure your 'print' screen preview allows for images to be displayed. On Chromium this option van be found on the print screen (Ctrl+P) under "More Settings" and is called "Background graphics".

On Firefox, this setting can be found under "Page Setup..." in the tab titled 'Format & Options', there you'll find a section named 'Options' that includes a checkbox to enable 'Print Background (colors & images).

Then, make sure there's no (hidden) CSS-statement anywhere along the lines of:

@media print {
  * {background:none}
}

Or anything that would influence the elements that you're trying to print.