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