5

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: alt text

Flupkear
  • 2,135
  • 7
  • 29
  • 32
  • 3
    so you mean instead of using a browser's print preview function, you want to show the print preview as actual webpage content? – nonopolarity Jun 04 '09 at 22:15

4 Answers4

4

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)...

Ropstah
  • 17,538
  • 24
  • 120
  • 194
  • thanks, I forgot to mention that the page size is letter no matter what the user has configured – Flupkear Jun 04 '09 at 22:21
  • 1
    The page size is only one issue. The make/model of the printer determines the printable area of the image and affects the soft page breaks and margins. There really is no way to reliably predict what it will look like without knowing the details of the printer and print driver. – JohnFx Jun 04 '09 at 22:33
  • 1
    Indeed, I said users' print-settings, I meant the client print configuration (all the stuff JohnFx states). – Ropstah Jun 04 '09 at 23:00
3

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".

Sasha Chedygov
  • 127,549
  • 26
  • 102
  • 115
1

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.

Abhijeet Pathak
  • 1,948
  • 3
  • 20
  • 28
1

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.

whatsisname
  • 5,872
  • 2
  • 20
  • 27
  • 1
    This will not give the users a fair print preview, unless they get the converted pdf or png to print. Even then it depends on the printer how it will look (you display a marginless printer but the printer isn't able to print marginless... will it compress to the printable dimensions, or will it print several parts over several pages..? – Ropstah Jun 04 '09 at 23:02
  • the idea is show the user how many pages the HTML will contain when printed. when they actually want to print it, the original HTML will be use so the margin and all that will be set by the printer – Flupkear Jun 04 '09 at 23:34