Question

我在基于DaftMonk的生成器（https://github.com/DaftMonk/generator-angular-fullstack）的MEAN堆栈中使用AngularJS。我对Angular / JS / Node（以及stackoverflow）的所有内容都相当新，所以请随时指出我是否需要重新提问我的问题！）。

我的目标是从包含六个图形，图像和文本的Angular页面为用户生成多页PDF报告。

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

目前，当用户导航到“报告页面”时，会从Angular控制器向Node / Express发送http请求，Angular控制器会检查用户角色/组ID，查询数据库，分析数据并将其发回到浏览器渲染成图形（目前使用angular-chartjs和flot）。

用户选择图表类型，并且可以从20+的可能列表中选择最多六个图表。这六个图表是需要导出到PDF报告的（其他信息）。虽然我目前的解决方案是IE10 +，并且使用Modernizr为旧版浏览器禁用了PDF导出，但我需要（在合理范围内）尽可能兼容浏览器（至少是IE8 +）。

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

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

我已经阅读了PhantomJS中的cookie或使用代码浏览登录页面，但这似乎是一种实现此目的的麻烦方式。可以在服务器端创建一个html文件，注入了chart.js（或其他图表库）（和angular？）以及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是否存在工具。

我希望这会有所帮助。

使用Node / Express / Angular / PhantomJS中的图表导出PDF报告

1 个答案: