从Web应用程序生成PDF

时间:2016-07-22 10:39:58

标签: javascript jquery angularjs pdf gridster

我需要在我的webapp中从当前屏幕生成PDF。某种截图,但我遇到了严重的困难。

主要问题是视图包含一个用jQuery Gridster制作的网格;一些“小部件”包含复杂的元素,如表格,高级图表等。

因此,像jsPDFhtml2canvas这样的插件无法在prorper PDF中呈现我的页面。它们总是将它生成空白。

这是页面的样子。您可以/移动调整每个元素的大小: (对不起CIA风格,但那里有业务数据)

img

我遇到但有些不起作用的一些想法是:

  • 以编程方式使用浏览器print-to-pdf功能。 (不能)
  • 使用phantomjs。 (但页面状态很重要,所以......)

我相信任何试图从网络应用中的当前屏幕生成img PDF的人都可以广泛采用这种问题的解决方案。相当未解决的问题。

如果仅适用于Google Chrome浏览器,则可以。

非常感谢。

编辑:

一个可行的解决方案可能是找到一种方法来表示一个对象的当前布局状态,并用id和id保存它。

然后通过带有id的url param检索该对象,并将存储的布局应用到初始页面。

这样我可以用phatomjs截取屏幕截图,但对我来说这似乎很复杂。还有其他选择吗?

1 个答案:

答案 0 :(得分:3)

基于您正在努力捕捉动态内容的事实,我认为此时您需要退后一步,看看您可能需要改变您的方法。这些插件失败的原因是因为它们只能在交互之前使用HTML吗?

为什么不从服务器端将HTML转换为.pdf格式?但关键部分是, 发回当前的 HTML。通过发送回来,您将更新的静态HTML发送回服务器以呈现为PDF?我之前从服务器端使用过HTML到PDF并且工作正常,所以我不明白为什么它不合适。

有关HTML到PDF服务器端的详细信息,请参阅this answer