I'm creating a web based flyer designer for dog walkers to customize flyers to print off. It's very basic and uses jQuery to change the contents/text of a DIV to what they want on the flyer...

My problem is how to let them print the flyers. Ideally, they want to choose between 2 or 4 flyers per A4 page. Or to export as pdf or image to take to a printer. I've looked into exporting html/css as a PDF or image but can't seem to find anything that suits the situation.

Any help is appreciated.

Thanks

I'm creating a web based flyer designer for dog walkers to customize flyers to print off. It's very basic and uses jQuery to change the contents/text of a DIV to what they want on the flyer...

My problem is how to let them print the flyers. Ideally, they want to choose between 2 or 4 flyers per A4 page. Or to export as pdf or image to take to a printer. I've looked into exporting html/css as a PDF or image but can't seem to find anything that suits the situation.

Any help is appreciated.

Thanks

• javascript
• jquery
• html
• css
• printing

• 2 I need to ask: What's wrong with the browser's built-in print dialog? It's often easy to print-to-PDF, and a custom print-only stylesheet would solve most formatting problems. Use a button to fire a JavaScript print() mand to help the hard-of-puting and you're all done. – Blazemonger Commented Apr 30, 2012 at 13:20

4 Answers 4

Webkit HTML to PDF\Image should do exactly what you want:

http://code.google./p/wkhtmltopdf/

I would remend using the print media type in the main stylesheet:

@media print
{
  /* style sheet for print goes here */
}

Or, separate the print styles in it's own stylesheet:

<link href="foo.css" media="print" rel="stylesheet" type="text/css" />

This allows you to define custom styles that are displayed when using the browser's Print dialog (File->Print...). That way, your end-user can print to their printer, print-to-PDF (or Microsoft XPS Document Writer), or whatever else they want to print to, without relying on a 3rd party library that, from past experience, is subject to quirks and inaccuracies in converting CSS styles.

You have loads of options... here is just one, in case you want to export your webpage to PDF without much work:

Remendation? for our specific HTML -> PDF project

Just for more options, there's also phantomJS, which uses webkit rendering engine as well. QtPDF is the pdf engine it uses behind the scenes

http://phantomjs/

This assumes you have a server that you can execute mand line scripts off of. Ive used this recently in a project, and it works great for converting HTML->PNG. Have not personally tested the PDF functionality extensively.