javascript - 动态 PDF 与 HTML 转 PDF

Question

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

我正在研究实现此目的的方法，有 2 个选项，其中最著名的选项是使用第三方库从 HTML 本身生成 PDF，这只需编写大约 3 个内容即可4行代码。

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

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

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

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

Answer 1

根据您的描述，您至少需要将两者结合起来。如果您可以使用 HTML 到 PDF 转换器，那就更好了，因为这样可以节省大量开发时间。但由于 UI 具有 Accordion 等功能，这意味着您需要确定如何在静态 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 事物。