动态 PDF 与 HTML 到 PDF答案

【问题标题】：dynamic PDF v/s HTML to PDF动态 PDF 与 HTML 到 PDF
【发布时间】：2017-02-14 07:33:40
【问题描述】：

我目前正在为医疗保健行业开发多个仪表板，其中一项常见要求是按原样从屏幕生成 PDF。我们在这些仪表板上没有任何常见的 CRUD 操作。它们通常包括很多图表（使用 highcharts）、一些表格数据、手风琴等。并且所有内容都作为少数选择语句的一部分呈现，这些语句将在页面加载或用户单击某些图表或任何 HTML 元素时触发.

我正在研究如何做到这一点，有 2 个选项，其中最广为人知的选项是使用第三方库从 HTML 本身生成 PDF，这包括编写大约 3- 4行代码。

另一种选择是编写代码以动态生成看起来像 UI 的 PDF。这将需要更多的努力，因为我们必须考虑品牌和样式，生成与仪表板 UI 完全相同的图表，创建与仪表板 UI 一样的表格数据。

所有仪表板的共同 UI 要求是支持所有主流浏览器 - 从 9 开始的 IE、forefox、Chrome、Safari。还支持 iPad、iPhone 的最后 3-4 个版本和其他最常见的设备。

我们用于这些仪表板的技术是 angular 2.0、一些 JQuery、HTML、CSS 和 asp.net web api，在某些情况下还包括 asp.net MVC。

我需要了解为所有这些仪表板生成 PDF 的上述两种方法的优缺点。我用谷歌搜索了这个发现很少。有人可以分享一些对此的见解并根据他们的经验提供一些意见吗？

【问题讨论】：

标签： javascript html angularjs pdf highcharts

【解决方案1】：

根据您的描述，您至少需要将两者结合起来。如果您可以使用 HTML 到 PDF 转换器总是更好，因为这样可以节省大量的开发时间。但由于 UI 有手风琴之类的东西，这意味着您需要确定如何在静态 PDF 中呈现动态信息。

所以我过去使用的混合方法是使用 Angular 来标记 HTML，如下所示：

<my-accordion ng-if="!ExportingPDF"> ... accordion view for browser ...</my-accordion>
<div ng-if="ExportingPDF"> ... expanded and slightly-modified view for PDF ... </div>

当用户单击“导出 PDF”按钮时，您可以创建一个函数，该函数将执行 $scope.ExportingPDF = true，然后抓取页面上所有可见的 HTML（经过短暂的 $timeout 延迟以给 Angular 时间更新 DOM）。

然后，您的 ExportPDF 函数会将 HTML POST 发送到服务器，基于服务器的 HTML 到 PDF 代码库将在服务器上转换 HTML，然后将其作为文件下载附件发送回浏览器。

示例代码：

$scope.ExportPDF = function() {
    $scope.ExportingPDF = true;
    $timeout(function() {
        $ajax.post("/path/to/conversion-routine.abc", { data: $('html')[0].outerHTML }
    }, 50); // short delay so Angular has time to update the DOM
}

这让您可以利用 Angular 和现有标记的强大功能，同时仍然处理所有需要调整以在静态 PDF 文档中正确呈现的奇怪的小 UI 内容。

【讨论】：