CODEWITHSUNDEEP
javascripthtmlprinting
codefactor
codefactor

Reputation: 1656

How to print a large HTML based org chart - right edge of the chart is cut off

In my application I have an html-based org chart that can become rather large (both horizontally and vertically). We are replacing a flash based org chart with this html version. The actual HTML is a mix of HTML5 (such as SVG) and standard HTML.

On the page you can drag the chart around, zoom in, zoom out - everything is looks great - no problems with the normal display.

The problem, though, is the flash based org chart has a "Print" button that opens up a fancy flash-based print dialog that allows you to fit the chart to one page or multiple pages.

Here's what I did to attempt to support this:

  1. Listen for the beforeprint
  2. Make the chart "full screen" (remove header/footer/etc only chart is visible now)
  3. Remove any scale applied so it is at 100% scale
  4. On the afterprint event, i bring back all the elements that were hidden and reapply the scale

I also tried to copy the HTML and show it inside a popup window and then the user would have to print that page instead.

It seems that if the chart is very tall it seems to spread across multiple printed pages, but if its really wide - the right side of the chart just gets cut off.

What can I do so that the entire chart gets printed somehow??

Maybe I could figure out a scale to apply to the chart so that it fits exactly in the horizontal space?

Can I somehow detect the number of pixels that will fit horizontally on the resulting printed page? Does that require the DPI of the printer?

Why doesn't something that is really wide get printed?

Upvotes: 0

Views: 1753

Answers (1)

user1945782
user1945782

Reputation:

There are some interesting points in this post. I know this will be an absolute pain, but is it possible to programmatically split your sheet up into tiled divs of the right size (x and y) then stack them one above the other in a div that's only visible to the printer (using @dave's suggestion for CSS media setting)? I know that on our printers a standard width for a page is 649px in the majority of cases (unless someone's messed with the print settings).

I'm not sure that this constitutes an answer really, but if you can pull it off!... ;o)

Upvotes: 1

Related Questions