2

如果您stackoverflow.com通过访问以下网址在 Similarweb 上进行查询：

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

您会看到网站上的统计数据概览。我相信我理解他们是如何利用诸如 Highcharts 之类的库来制作这个概述的。

我想不通的是他们如何设法生成漂亮的 pdf 报告（您可以在右上角请求 PDF 报告，但它需要提供电子邮件地址（无从属关系！））具有相同的概述，大致相同的比例并带有精心放置的分页符。

那么我的问题是，您如何在 PDF 中呈现像这样的仪表板，包括 SVG 和 Highcharts，并且使用仔细的分页符，如此干净利落？我读过关于 PhantomJS 的文章，这是实现此结果的好方法吗？

4

1 回答 1

5

作为为 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
于 2014-04-10T14:10:34.687 回答