Geek Answers Handbook

Creating a PDF file using the Ionic framework

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

Basically I need to create html with the values ​​passed from the Ionic mobile application and some CSS styles, and then convert it to a PDF file that can be saved inside the local file system on the device (Android and iOS device), I want to do this using the library javascript so that it can be used on both Android and iOS devices.

+4
source share
3 answers

Ok, this is a more detailed answer, which gives an example that I mentioned in my first answer. I have a repo on github:

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

and an online imtqy.com example:

https://jeffleus.imtqy.com/ionic-pdf/www/#/ .

First, I created ReportBuilderSvc, which is used to generate the actual report declaration in JSON format used by pdfMake.org. This process will be application specific, so I created it as a separate service. You can view my sample code and play around with your own document definition on the pdfMake.org website. After you have a draft report, put your own JSON document definition in the _generateReport method.

pdfMake.org angular ReportSvc. generateReport() ReportBuilderSvc, JSON. $q , , . / iPhone 4 , 30-45 . , , .

:

  • generateReportDef → : ReportBuilderSvc out: JSON rpt
  • generateReportDoc → : JSON doc def out: PDFDoc
  • generateReportBuffer → : pdfDoc out: buffer []
  • generateReportBlob → in: buffer [] out: Blob
  • saveFile → in: Blob out: filePath

$rootScope :

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

"" :

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

, , pdf, iframe src w/ dataURI - . InAppBrowser , . , angular. angular/ .

, node, angular ...

+7

, , , , . , Ionic, PDF-, pdfMake.org. , JSON HTML. , SVG. , Ionic. , , , / InAppBrowser 64.

, . HTML, .

+2

This blog post may help you. 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 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

+1
source

More articles:


All Articles