Tips on making a printable page

[CavemanUK]

Hi guys,

Im creating a private website for looking after jobs and invoices. Its php driven and hosted by oneandone. I need to make it print invoices which ive done before by knocking up a printable html page but i think there must be a better way of doing it?

im wondering if its possible to generate an inline PDF document? the site is viewed on firefox and ie8 primarily but may be going to smartphones in the future.

Cheers

 

[angelwatt]

Two quick suggestions.

1. CSS can do print stylesheets that only get applied to the page when the user goes to print. This works pretty well as ling as you don't need absolute control of the page layout including margins, since that's part;y determined by the browser and OS settings.
2. For generating PDFs, there's a couple PHP libraries that let you do that, which can be found with a search.

 

[needlnerdz]

one option might be to just create a media="print" - css style guide for the body, giving the width/height exact measurements in mm to your desired page. You could even do a pulldown menu with preset page sizes to modify those values on the fly? I've had some success with this, however for me Safari often likes to dominate the print dialog from how it 'should' be...

on the PDF side, i've never tried it but been quite interested, quick google brings up freebies such as:

http://www.tufat.com/s_html2ps_html2pdf.htm

and this i bookmarked a long time ago, but have never dug into:

http://www.tecnick.com/public/code/cp_dpage.php?aiocp_dp=tcpdf_examples

might be useful for stylizing the output specifically for PDF printing.


goodluck

 

[SrWebDeveloper]

Spot on advice, needlnerdz.

OP, to expand on that a little this refers to creating a separate style sheet, i.e. printer.css, and using the media attribute set to "print" in the link tag in your head area that loads the stylesheet. Example here.

As to PDF creation, most languages have some methods for creating PDF's dynamically (sent to the user as a download) - even in PHP you can do this. I've learned the trick is to format each page using simple HTML and CSS, set margins to 0, enable scaling and experiment for best results.

For printing in general put all your content areas into div's or assign ID's and classes on most elements so you can create simple selectors which you control in your various stylesheet media types, i.e. screen vs. print.

-jim