CasperJS captures PDF of a page with @media print


TL;DR: Unlike capturing screenshot, the way CasperJS renders PDF of a page is similar to “Cmd+P” printing out as PDF. It takes consideration of @media print. You can take the advantage to have different look and feel for your PDF by tweaking the CSS.

So I have a feature-rich one page web app built with Backbone rendering beautiful info-graphics and reports. I got a bigger challenge of capturing those graphics and send them to customers.

I don’t want to use our minimal backend for generating PDF since it does almost nothing beside serving the assets. Also the second reason is to reuse complex Backbone views and templates already written for the frontend.

This sounds like a perfect job for headless Webkit engine, PhantomJS and CasperJS. CasperJS renders the page (or partially), waits for DOM and JS successfully executed and finally generates the PDF.

I got 2 problems with this approach.

At first I got a weird PDF which CSS wasn’t loaded. It turns out that there is no equivalent CSS for print media and PhantomJS uses it to print as PDF

The second problem is some graphs was cut in half between pages. Thanks to @media print, I can set different look and feel for the PDF including

@media print
{
section {page-break-before:always}
}

which breaks every section onto a new page.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s