使用 Ionic 框架生成 PDF 文件

Question

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

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

Answer 1

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

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

Answer 2

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

上有一个回购协议

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

和在线 github.io 示例：

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

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

然后，我将 pdfMake.org 库包装在一个名为 ReportSvc 的免费 angular 服务中。这会调用 ReportBuilderSvc 的 public generateReport() 方法来获取 reportDefinition JSON。我将生成报告的过程分解为 $q 承诺包装的内部方法，以允许服务发出进度事件，客户端可以使用这些事件来更新 UI。在 older/slower iPhone 4 台设备上，我看到报告过程花费了 30-45 秒。这种更新 UI 的能力真的很重要，否则应用程序看起来像冻结了。

包装器将流程分解为：

generateReportDef --> in: ReportBuilderSvc out: JSON rpt object
generateReportDoc --> in: JSON doc def out: pdfDoc 对象
generateReportBuffer --> in: pdfDoc object out: buffer[]
generateReportBlob --> in: buffer[] out: Blob 对象
saveFile --> in: Blob object out: filePath of report

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

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

这允许客户端 'subscribe' 在控制器中或消费代码：

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

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

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

Answer 3

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

现在要按照我在 post 上的评论保存文件（使用 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"

使用 Ionic 框架生成 PDF 文件

Generating PDF file with Ionic framework

pdf

cordova

pdfmake

ionic