Search code examples
cordovapdfionic-frameworkpdfmake

Generating PDF file with Ionic framework

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.

Solution

  • 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...