使用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的免费角度服务中.这将调用ReportBuilderSvc的public generateReport()方法来获取reportDefinition JSON.我将生成报告的过程分解为$ q promise-wrapped内部方法,以允许服务发出客户端可用于更新UI的进度事件.在较旧/较慢的iPhone 4设备上,我看到报告过程需要30-45秒.这种更新UI的能力非常重要,否则应用程序看起来已经冻结了.

包装器将进程分解为:

1. generateReportDef - > in: ReportBuilderSvc out: JSON rpt对象
2. generateReportDoc - > in: JSON doc def out: pdfDoc对象
3. generateReportBuffer - > in: pdfDoc object out: buffer []
4. generateReportBlob - > in: buffer [] out: Blob对象
5. saveFile - > in: Blob对象out:报告的filePath

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

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

这允许客户端在控制器中"订阅"或使用以下代码消费代码:

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

最后,为了显示pdf,我使用iframe并在浏览器中为在线演示设置src w /生成的dataURI.并且,我使用InAppBrowser和在设备或模拟器上运行时创建的本地文件.我计划将其清理一下,以便它可以作为库包含在内并作为角度服务注入.这将使客户自由地参加具有安全包裹的角/离子服务的报告声明.

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