5

Is there any plugin for Ionic framework to generate a pdf file using html content?

Basically I need to create a html with values passed from an Ionic mobile application and some css styles, and then convert it into a pdf file which can be saved inside the local file system in a device (Android device and iOS device). I want to do this with a javascript like library so that it can be used in both Android and iOS devices.

4

3 回答 3

7

好的，这是一个更详细的答案，提供了我在第一个答案中提到的示例。我在 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 的公共 generateReport() 方法来获取 reportDefinition JSON。我将生成报告的过程分解为 $q 承诺包装的内部方法，以允许服务发出进度事件，客户端可以使用这些事件来更新 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 object out: filePath of report

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

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

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

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

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

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

于 2015-03-02T22:56:40.613 回答
2

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

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

于 2015-02-24T19:50:04.913 回答
1

这篇博文可能会对您有所帮助。它显示了如何创建 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");
    });
});

此文件在您的数据目录中保存为“example.pdf”

于 2016-06-14T13:28:31.337 回答