2

If you query stackoverflow.com on Similarweb by visiting the following url:

http://www.similarweb.com/website/stackoverflow.com

you are presented with a nice overview of stats on the website. I believe I understand how they make this overview leveraging libraries such as Highcharts.

What I can't figure out is how they manage to generate a beautiful pdf report (you can request a PDF report on the top right but it requires providing an email address (no affiliation!)) with the same overview, roughly the same proportions and with carefully placed page breaks.

My question then is how do you render a dashboard like this, including SVG and Highcharts, so cleanly with careful page breaks, in PDF? I've read about PhantomJS, would that be a good solution to achieve this result?

gdoron
  • 147,333
  • 58
  • 291
  • 367
jessems
  • 1,582
  • 2
  • 11
  • 16

1 Answers1

5

As the one developed the PDF generation service for SimilarWeb, I think I'll take this one :)

So the "magic" is being done using an open source project named wkhtmltopdf which uses QT Webkit rendering engine to render html pages to PDF files.

To make it perfectly fit into pages, we're adding additional CSS to a special version of the stats page we provide to wkhtmltopdf. This CSS contains rules for hiding (display: none) unwanted elements (navbar and footer), setting the sections height to fit into a page, setting the page break and adding SimilarWeb's logo at the bottom-right corner and some other customizations.

.content-page {
  page-break-after: always;
  height: 720px!important;
  padding-bottom: 10px!important;
  background: #FFF url(/images/powered-by.png) right bottom no-repeat!important;
}

We call wkhtmltopdf with the following parameters to achieve the result you mentioned:

wkhtmltopdf -O Landscape --zoom 1.2 --enable-javascript --no-outline --javascript-delay 10000 --images @URL @FILENAME.pdf
Eyal
  • 104
  • 4