从 Node/Express/Angular/PhantomJS 导出带有图表的 PDF 报告

Question

我在基于DaftMonk的生成器（https://github.com/DaftMonk/generator-angular-fullstack）的MEAN堆栈中使用AngularJS。我对几乎所有Angular/JS/Node（和stackoverflow）都相当陌生，所以如果我需要重写我的问题，请随时指出！）。

我的目标是从一个包含六个图表，图像和文本的角度页为用户产生一个多页PDF报告。

在stackoverflow和Google上有许多与潜在解决方案相关的问题，但是在详尽地检查了这些问题之后，它们对我需要实现的目标没有帮助（或者我不明白如何在我的场景中使用它们..）。

目前，当用户导航到“报告页面”时，一个超文本传输协议请求从Angular控制器发送到Node/Express，Angular控制器检查用户角色/组ID，查询数据库，分析数据并将其发送回浏览器以呈现为图形（当前使用angle-chartjs和flot）。

用户选择图形类型，并可以从可能的20个列表中选择最多六个图形显示。这六个图形是需要导出到PDF报告（以及其他信息）的图形。尽管我目前的解决方案是IE10，在使用Modernizr的旧浏览器中禁用PDF导出，但我需要尽可能使其与浏览器兼容（至少是IE8）。

stackoverflow和Google可能的解决方案包括在Node中使用PhantomJS来捕获屏幕，或者使用客户端PDF渲染器（例如jsPDF）。其中，我的感觉是PhantomJS将提供最大的灵活性/浏览器兼容性。此外，我需要根据用户角色生成多个不同的报告，因此在浏览器中生成报告的所有代码都是不可取的。但我完全不知道如何使用平均堆栈访问“客户看到的”。PhantomJS需要有效地作为客户端登录，并访问客户端所做的六个图形选择。

根据我的研究，使用PhantomJS需要创建一个html页面，以某种方式将客户端看到的内容/数据/图形选择传递给它，然后在发送回浏览器之前，捕获这些内容并呈现为PDF。一种方法可能是将所需的信息传递回Express(用POST？)然后呈现一个服务器端的html页面，PhantomJS可以指向这个页面，但是我不知道如何实现这个(或者是否可能)。另一种可能是将客户报告数据、选择等存储在数据库中，并启动一个任务来呈现PDF，并在完成后将其发送回浏览器，但同样，我不知道如何实现这一点。

我读过PhantomJS中的Cookie或使用代码浏览登录页面，但这似乎是一种很麻烦的方法。可以在服务器端创建带有图表的html文件吗。js（或其他图表库）注入（和角度？）以及PhantomJS渲染为PDF所需的所有用户数据/图表选项？我想在某些方面，我需要能够在服务器端使用PDF生成器、图表库等来创建PDF。

关于如何实现这一点的任何建议（包括可能的代码示例）将不胜感激。

Answer 1

我想我和你有同样的问题（只有我在服务器端使用Laravel）。

我想出的想法是将angular-chartjs生成的画布转换为图像（在画布元素上使用toDataURL（）

$('.theCanvas').each(function () {
           var canvas=this;
           img=JSON.stringify(canvas.toDataURL());

});

http://plnkr.co/edit/PkZiqYynzQXehbe6p1eH?p=preview然后将图像发送到服务器以创建pdf，最后将创建的pdf的链接发送给用户。

就我而言，它们是大量从服务器端的html生成PDF的包，我不知道是否存在Node工具。

我希望这能有所帮助。