Similarweb如何创建PDF报告？

Question

如果您stackoverflow.com通过访问以下网址查询Similarweb:

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

您将看到网站上的统计数据.我相信我理解他们如何利用Highcharts等库来概括.

我无法弄清楚的是他们如何设法生成一份精美的pdf报告(你可以在右上方请求PDF报告,但它需要提供一个电子邮件地址(没有联盟!))具有相同的概述,大致相同的比例并仔细放置分页符.

那么我的问题是你如何渲染这样的仪表板,包括SVG和Highcharts,如此干净,小心的分页符,用PDF格式？我读过有关PhantomJS的信息,这对于实现这一结果是否是一个很好的解决方案？

Answer 1

当我为SimilarWeb开发PDF生成服务时,我想我会选择这个:)

因此,使用名为wkhtmltopdf的开源项目来完成"魔术",该项目使用QT Webkit渲染引擎将html页面呈现为PDF文件.

为了使其完全适合页面,我们将额外的CSS添加到我们提供给wkhtmltopdf的特殊版本的统计页面中.此CSS包含隐藏(显示:无)不需要的元素(导航栏和页脚),设置页面高度以适应页面,设置分页符以及在右下角添加SimilarWeb徽标和其他一些自定义的规则.

.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;
}

我们使用以下参数调用wkhtmltopdf来实现您提到的结果:

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