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的能力非常重要，否则应用程序看起来已经冻结。

包装器将进程分解为：

generateReportDef - ＆gt; in： ReportBuilderSvc out： JSON rpt对象
generateReportDoc - ＆gt; in： JSON doc def out： pdfDoc对象
generateReportBuffer - ＆gt; in： pdfDoc对象 out： buffer []
generateReportBlob - ＆gt; in： buffer [] out： Blob对象
saveFile - ＆gt; in： Blob对象 out：报告的文件路径

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

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

这允许客户在控制器中“订阅”或使用以下代码消费代码：

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

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

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

Answer 2

你的问题可能需要更多细节，这可能不是你想要的。但是，我有一个Ionic应用程序，使用pdfMake.org库呈现pdf报告。它是制作文档的声明性语法，但它使用JSON而不是直接的HTML文档声明。我已经能够插入图像，表格，甚至可以绘制SVG饼图和条形图。无论如何，您可以按照他们的教程并为Ionic应用程序构建一个很好的解决方案。我整理了一组链接函数，这些函数构建文档声明，呈现文档，保存到本地文件/或作为base-64编码文档呈现给InAppBrowser。

如果您对此方法感兴趣，我可以整理一个演示并分享。但如果它必须是直接的HTML转换，那么您需要采用不同的方法。

Answer 3

此博客文章可能会帮助您。它显示了如何创建PDF文件：http://gonehybrid.com/how-to-create-and-display-a-pdf-file-in-your-ionic-app/

现在保存文件（使用ng-cordova），因为我对帖子发表了评论，请按照以下步骤操作：

pdfMake.createPdf(dd).getBuffer(function (buffer) {
    var utf8 = new Uint8Array(buffer); // Convert to UTF-8... 
    binaryArray = utf8.buffer; // Convert to Binary...
    $cordovaFile.writeFile(cordova.file.dataDirectory, "example.pdf", binaryArray, true)
        .then(function (success) {
            console.log("pdf created");
        }, function (error) {
            console.log("error");
    });
});

此文件保存为＆＃34; example.pdf＆＃34;在您的数据目录中

使用Ionic框架生成PDF文件

3 个答案: