Generating PDF file with Ionic framework

Question

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.

Answer 1

Alright, this is a more detailed answer that provides the example I mentioned in my first answer. I have a repo on github:

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

and an online github.io example:

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

First off, I created a ReportBuilderSvc that is used to generate the actual report declaration in the JSON format used by pdfMake.org. This process will be application specific, so I generated this as a separate service. You can view my example code and play around w/your own document definition on the pdfMake.org website. Once you have a report design, place your own document definition JSON in the _generateReport method.

Then, I wrapped the pdfMake.org library in a complimentary angular service, named ReportSvc. This calls the public generateReport() method of the ReportBuilderSvc to get the reportDefinition JSON. I broke the process of generating the report into $q promise-wrapped internal methods to allow the service to emit progress events that the client can consume for updating the UI. On older/slower iPhone 4 devices I saw the report process take as much as 30-45 sec. This ability to update the UI is really important, otherwise the app looks like it has frozen.

The wrapper breaks the process into:

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

At each step the service broadcasts an event on the $rootScope using an internal utility function:

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

This allows clients to 'subscribe' in the controller or consuming code with:

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

And finally, to display the pdf, I use an iframe and set the src w/ the generated dataURI for the online demo in the browser. And, I use the InAppBrowser and the local file created when run on the device or emulator. I plan to clean this up a little more so that it can be included as a library and injected as an angular service. This will leave the client free to attend to the report declaration w/ a safely wrapped angular/ionic service.

Any thoughts are appreciated as I am new to the node, angular, ionic world and can definitely use help too...

Answer 2

Your question probably needs some more detail and this may not be exactly what you are looking for. However, I have an Ionic app that renders pdf reports using the pdfMake.org library. It is a declarative syntax to make your documents, but it uses JSON instead of straight HTML document declaration. I have been able to insert images, tables, and even draw SVG pie charts and bar graphs. Anyway, you can follow their tutorials and build a nice solution into an Ionic app. I put together a set of chained functions that build the document declaration, renders the document, saves to a local file/or renders to InAppBrowser as a base-64 encoded document.

If you are interested in this approach, I can put together a demo and share. But if it must be a straight HTML conversion, you'll need to pursue a different approach.

Answer 3

This blog post might help you out. It shows how to create a PDF file: http://gonehybrid.com/how-to-create-and-display-a-pdf-file-in-your-ionic-app/

Now to save the file (using ng-cordova) as I have commented on the post follow these steps:

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");
    });
});

This file is saved as "example.pdf" in your data directory