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

Export a PDF report with charts from Node/Express/Angular/PhantomJS

本文关键字：PDF 报告 Express Node Angular PhantomJS      更新时间：2023-09-26

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

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

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

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

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

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

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

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

关于如何实现这一目标的任何建议（带有可能的代码示例）将不胜感激。

我想

我和你有同样的问题（只是我在服务器端使用 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 的工具。

我希望这有所帮助。

相关文章：