Similarweb如何创建PDF报告？ [英] How does Similarweb create their PDF reports?

问题描述

如果您在Similarweb上查询 stackoverflow.com ，请访问以下网址： http://www.similarweb.com/website/stackoverflow.com

您可以在网站上看到很好的统计数据。我相信我理解他们是如何利用Highcharts等库来进行这个概述的。

我无法弄清楚他们如何设法生成一个漂亮的pdf报告（您可以在右上角请求PDF报告，但需要提供一个电子邮件地址（没有从属关系！）），相同的概述，大致相同的比例，并仔细放置分页符。

我的问题是，你如何呈现这样的仪表板，包括SVG和Highcharts，在PDF中如此干净利用仔细的分页符？我已经阅读了关于PhantomJS的信息，这是否能很好地解决这个问题？

服务SimilarWeb，我想我会采取这一个：）

因此，魔术正在使用一个名为 wkhtmltopdf ，它使用QT Webkit渲染引擎将HTML页面呈现为PDF文件。

制作完全适合页面，我们将额外的CSS添加到我们提供给wkhtmltopdf的统计页面的特殊版本。
此CSS包含用于隐藏（显示：无）不需要的元素（导航栏和页脚）的规则，设置段高度以适合页面，设置分页符并在右下角添加SimilarWeb徽标等

  .content-page {
 page-break-after：always; 
 height：720px！important; 
 padding-bottom：10px！important; 
背景：#FFF网址（/images/powered-by.png）右下不重复！重要; 
 
 $ / code> 

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



  wkhtmltopdf -O风景 - 缩放1.2  - 启用-javascript  - 无轮廓 -  javascript-delay 10000 --images @ URL @ FILENAME.pdf 
  




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?

解决方案

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

这篇关于Similarweb如何创建PDF报告？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！