How to display a print preview of an HTML document

Question

I need to display some HTML content as it will be printed. Basically, I want to emulate the browser print preview feature.

I'm not sure how to do this just with HTML/CSS/JavaScript. The only solution I came up is to convert the HTML to PDF so it´s split into pages and then convert that PDF to images and print each image one bellow the other.

It will be really helpfull if someone can point a more straight forward method. I'm not even sure if this is posibble.

BTW, I'm using PHP in the backend, so if there is a PHP class for this it will be helpfull.

The page size for diplaying it will be letter no matter what the user have configured

This how it should look in the browser:

Answer 1

I don't think this is possible. You cannot know all the users' print-settings in the browser (javascript) and definitely not on the server (php, asp, java).

update

Think about it this way (please keep in mind that a decent 100% solid print preview is NOT possible):

• User navigates to page and asks for a print preview
• Website provides print preview (preferably in a html-format, otherwise png or pdf)
• User likes and wants to print:
  1. From the browser
  2. From some image viewing/editing program (png)
  3. From Acrobat (pdf)
• Every print solution has it's own Print... dialog. You can change print settings here.

It's the last point where everything you want fails... You don't have control over the output anymore at that point (from your website)...

Answer 2

As others have point out, you can't do this. My recommendation is that you make a "printer-friendly" version that just contains a plain white background and plain black text. But that's about as close as you can get to the actual "print preview".

Answer 3

HTML wasn't really meant for page layout, it was meant to be read on screen. Why is the browsers page preview not good enough?

Anyways, what you could do is try and convert the html to latex or something similar, and render that to a pdf or png on the server side and display that. But that would preclude using very complicated html layouts otherwise it will get pretty nasty.

Answer 4

I think there's a simple workaround.

You can ask user the page size and top, bottom, left, right margins. Then render the page in PDF using these settings. PDF will guarantee that the page will be printed as generated.

I think this approach should work well.