Question

我目前正在为医疗保健行业开发多个仪表板，其中一个常见的要求是从屏幕生成PDF。我们在这些仪表板上没有任何常见的CRUD操作。它们通常包括许多图表（使用高图），一些表格数据，手风琴等。一切都呈现为少数select语句的一部分，这些语句将在页面加载时触发，或者如果用户点击某个图表或任何HTML元素

我正在研究如何做到这一点，有两个选项，其中最常见的选择是使用第三方库从HTML本身生成PDF，其中包括写3的最小努力4行代码。

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

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

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

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

Answer 1

根据你所描述的内容，你至少要想要两者兼顾。如果您可以使用HTML-to-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函数将POST HTML发送到服务器，其中基于服务器的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事物。

动态PDF v / s HTML到PDF

1 个答案: