cordova - 使用 Ionic 框架生成 PDF 文件

Question

Ionic 框架是否有任何插件可以使用 html 内容生成 pdf 文件？

基本上我需要使用从 Ionic 移动应用程序和一些 css 样式传递的值创建一个 html，然后将其转换为 pdf 文件，该文件可以保存在设备(Android 设备和 iOS 设备)的本地文件系统中。我想使用类似 javascript 的库来执行此操作，以便它可以在 Android 和 iOS 设备中使用。

Answer 1

好的，这是一个更详细的答案，提供了我在第一个答案中提到的示例。我在 github 上有一个仓库:

https://github.com/jeffleus/ionic-pdf

和一个在线 github.io 示例:

https://jeffleus.github.io/ionic-pdf/www/#/.

首先，我创建了一个 ReportBuilderSvc，用于生成 pdfMake.org 使用的 JSON 格式的实际报告声明。此过程将是特定于应用程序的，因此我将其生成为单独的服务。您可以在 pdfMake.org 网站上查看我的示例代码并使用您自己的文档定义进行操作。完成报表设计后，将您自己的文档定义 JSON 放在 _generateReport 方法中。

然后，我将 pdfMake.org 库包装在一个名为 ReportSvc 的免费 Angular 服务中。这将调用 ReportBuilderSvc 的公共(public) generateReport() 方法来获取 reportDefinition JSON。我将生成报告的过程分解为 $q promise 包装的内部方法，以允许服务发出进度事件，客户端可以使用这些事件来更新 UI。在较旧/较慢的 iPhone 4 设备上，我看到报告过程需要 30-45 秒。这种更新 UI 的能力非常重要，否则应用程序看起来就像卡住了一样。

包装器将过程分为:

generateReportDef --> 在:报表生成器服务 出: JSON rpt 对象

generateReportDoc --> 在: JSON 文档定义 出: pdf文档对象

生成报告缓冲区 --> 在: pdf文档对象 出:缓冲区[]

generateReportBlob --> 在:缓冲区[] 出: Blob 对象

保存文件 --> 在: Blob 对象 出:报告文件路径

在每一步，服务使用内部实用函数在 $rootScope 上广播一个事件:

function showLoading(msg) {
    $rootScope.$broadcast('ReportSvc::Progress', msg);
}

这允许客户端在 Controller 中“订阅”或使用以下代码:

$scope.$on('ReportSvc::Progress', function(event, msg) {
    _showLoading(msg);
});

最后，为了显示 pdf，我使用 iframe 并为浏览器中的在线演示设置了带有生成的 dataURI 的 src。而且，我使用 InAppBrowser 和在设备或模拟器上运行时创建的本地文件。我计划对此进行更多清理，以便可以将其作为库包含并作为 Angular 服务注入(inject)。这将使客户可以自由地参加带有安全包装的角度/ ionic 服务的报告声明。

任何想法都会受到赞赏，因为我是节点，角度， ionic 世界的新手，并且绝对可以使用帮助......