jeffleus / ionic-pdf

sample use of pdfMake.org library to generate a pdf and display in iFrame or save as local file
58 stars 21 forks source link

ionic-pdf

This repo provides a sample pdf generator that:

View it now

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

Run locally

This assumes you already have an emulator setup for iOS or Android. Substitute android for ios below to use Android. (skip the ionic/cordova install if you are already setup to develop in ionic)

sudo npm install -g ionic cordova
git clone https://github.com/jeffleus/ionic-pdf.git
cd ionic-pdf
ionic platform add ios
ionic emulate ios

pdfMake.org

The pdfMake.org library is based on the pdfKit library and provides a declarative approach to document definition that provides a number of features: columns, tables, images, limited formatting, etc. The one piece that was missing for my specific use was generic SVG drawings. So, I made a small edit to allow me to draw a piechart using SVG path commands. NOTE - the pdfmake.min.js library used in this example contains my edits and is not the clean code from his repo.

inline pdf display

To allow the demo to run online and in browser testing, I provide an iframe and base-64 dataURL method to display the pdf inline. The pdfMake library generates the dataURL using the pdfKit provided method. My sample assigns this string as the src for the iframe object in the ionic view.

pdf save to file

To sample the file save method, you will need to run the app in the emulator or device to enable the use of the cordova File plugin. The app that a pulled this code out of does not use the ngCordova library yet. But I will eventually port over to match best practices use of plugins w/ Ionic.

Plugins Used

ToDo List