Create PDF Files with Ionic and Capacitor using PDFMake

nice hi my name's what's up welcome back to a new tutorial and today we're going into PDF generation we had this topic in the past but I got a lot of comments and questions under the last post so I wanted to update this post to ionic 5 and we will also switch over to using capacitor for our PDF generations so we will capture images include those images in the PDF file we will include local assets so a local image file a bunch of generated data we will create the PDF downloaded on the web and on a mobile device so let's do this I've done a few steps already so let's go through them first of all I start a blinking you ionic application of course type angular and capacitor enabled then I went ahead and installed a few packages first of all the most important package is of course the PDF make package to actually create a PDF file then because we were using capacitor and I also wanted to capture images on the browser we're going to install the pw8 elements from ionic which help to capture images and then also a little special here because opening a PDF file isn't actually bit easy and won't work out of the box on all platforms so for our native platforms we will actually use a cadaver plug-in within capacitor but that shouldn't be a problem on the web it will still work in other ways and for native we use the ionic native file opener and the according code / plugin so if you don't know this if you want to use Cordova plugins with capacitor most of them work and you simply run npm install with them no code over plucking it or anything like this once you're done you can actually run the first built which is always required to you then add the iOS and Android platform great so once we get all of this we need to do a few more preparation steps number one is loading our progressive web elements our main TS file which should be right here in your app folder so go ahead with these few lines which help to load the overlay once we capture images next step is the epidural not the home page in which we need to add these two imports so we need the HTTP client module if we want to load a local file I will show you how you can include that local file as a base64 string with PDF make and of course for the ionic native plug-in as usual you put in the import and the file opener goes to the array of providers so that's it for the general setup now we can go into our home page and because we will use a reactive form to capture some data let's quickly add the reactive forms module great with all of that in place we can finally dive in to our home page you see hTML is kind of the same like the blank version for the home page I have added a few things but so far our application is still pretty much blank I would say we start by creating our form which well let's do this a bit like this so you can see all the imports in the better way this is just our form to capture some data not really specific to PDF generation but the first thing that you will notice is once you will or you want to include a local asset file you can't just use the pad I think it works in nodejs environments but not inside your browser so although my image is right here in the assets folder so you can go ahead and just put any image in there we need to load this file now to a base64 string apparently we can just do this with angular which is pretty cool so I will bring in the code because we have quite a lot of code today and let's talk about this so what we do we use the HTTP to get a local file and you can all do this for Jason files and other files always using the HTTP client we will use the path to my file and the response type block and once we got that blob we will also create a new file reader that will read our blob data and finally use the base64 that we get back from the reader for our logo data so the logo data will be just start here if you have an application in which you just have like the logo of your company you could also just create a file with a base64 string in it that would help you to get rid of this and just load that file or just put the string somewhere in a JSON file anything like this but you need base64 data next step is our functionality to capture pictures because we want to include pictures in the PDF we will have a function take picture which is using basically the standard capacitor setup so camera get photo quality allow editing important the result type base64 I think it's also kind of possible with a real file URL but you would have to make some other cone convergence then because PDF may really wants to have a base64 string and since we can get this from the camera why not use it directly so I'll actually assign this value in a two different ways the first way is actually I'm actually not sure if it's used like this in PDF make we will see that but usually this string doesn't have this part so we create another string which will be used as a preview inside our HTML which has to look like this with all the information up front before the actual data so that's just a quick set up if you don't know about the imports let's quickly take a look we got the HTTP client I got the form Billa for our form in here we got the plugins some other typescript interfaces we will use in our application and then camera and file system will be used later and the import for our ionic native plugin as well now we haven't seen anything inside our view so had to change our home HTML first of all we can add our little form which just uses all the information that we previously set up so the form control names shell logo from - in text in usage with the input checkbox or a text area on submit we want to call the create PDF function that we still need to implement and everything's connected through the form group my form which should be right here in our typescript file if you want to trigger the ng submit action of a form you should set the type of the button that you want to use to submit if you want to have other buttons in the form you can actually set this to button because otherwise they would always trigger the submit and actually this is kinda Denny Moore okay great now we just need that functionality and I will actually also bring in a few more buttons because on create PDF we will just create the PDF object and then we will have another button to download the PDF this one's also for our image capturing which will call our take picture that we implemented before and once we see an image it will be displayed in here remember that's why we created this kind of different version after the take picture because the HTML expects it like this in an image tick and finally our download PDF will be disabled until we got a real PDF object in our file so let's go to the actual hard part of this tutorial outside which is to create PDF using PDF make is that how I typed it I just want to make sure yeah first of all we need a few imports which are actually taken directly somewhere from the PDF documentation so check it out PDF make github io / ducks client-side NPM install and then we can use the second option right here but this includes some ugly quotes so I will use my word but it looks exactly like the one we could get from the PDF make documentation we don't need anything else for angular an ionic issue see here wasn't really super helpful but check it out if you want to now within our crate PDF um we have to create a definition like this so I'm not in PDF make expert or anything like this but you can simply check out that playground play around here and create the styling that your application needs you need this little setup you can have columns you can have additional styling you see a bunch of things that you could do tables lists margins images everything could be in your PDF file and we will use a few of them but first of all we need to get the form value of our form so let's call value and also we want to check if we have a base64 image apparently I just noticed that this is really this is like I think this is like completely not needed at all let's get rid of this so we can just use this and go like this it's always good to go through the code once again so you notice that some some part just don't make any sense so we don't need this raw data we can just directly work with this string all the time if we got a preview of our image we want to include this somehow in our document and otherwise we will pass in like an empty object and if you check out the images you see then it's always image with hate or fit or in this case it's also a base64 string and that's what we're after as well so we will simply include image this the photo preview and with let's say 300 and now if we have created or captured an image we will include it and otherwise we will just leave this empty also in terms of the logo I will create an empty object and check if our form value I think it's called show logo yeah is set to true I actually don't know why I made this switch I just wanted to have a little more if statements and make this a bit more complex no just kidding want to show you the options of how to dynamically style your PDF of course that's the reason I include this so this stuck logo data and for the logo let's use a pretty small width of just 50 so now we got these two conditional values and we can start with our can we just use cons please duck definition definition like this yeah I think so if you check out the documentation you will find a lot of cool things for example one thing I kind of like was using a little watermark with just text color you can have some specific settings once again for everything in detail please check out the documentation it is really great and now after our watermark comes the actual content inside the content you can now create rows columns basically really like everything so I will bring in one by one the columns they're prepared first of all this little column setup which basically has our logo and a little date times drinked aligned to the right since we haven't applied any width this will just use the width available the logo will be to the top left and this text should be to the right and they will separate or use the space that they need so then a little text and to this one I actually also applied a header that we used in the previous tutorial on this code again so outside of the content you can define your own styles if you want to just like CSS rules basically but just with a bit different syntax again check out the documentation and once you define them as styles like header you can apply them to your elements in the PDF file now after our little header I'll put in a column now with fixed with 50% from and - and remember these are just the text now we're basically in the next row in in the next row we will use the same space once again so really take care of all the brackets it's really it's kind of challenging to set this up did I use it like this yeah I use it like this so now after we've said from it to is fixed text we now have the text from our variable in here once again using the same column setup now I will just include image since this is now either an object or empty object or contains our image and therefore already has the perfect structure that goes right in here and finally let's also format our main text that we've put into the text input right here okay we got the Styles this is just the definition and now to finish all of this it's important that you finally call PDF make dot create PDF and pass in the dark definition so by default this won't download the file I think ya think though and only create this PDF object basically a rendered word so that means we also need to implement a download functionality because right now we could create the PDF but we can't really let's look this out I have no idea how it looks like this PDF object perhaps we could see something interesting but I actually don't think so so please reload we see our view we got the inputs create PDF yeah document well I don't think they you could draw a PDF based on this but maybe you could actually if you're kind of nerd but let's try to download this so if this third platform from ionic is Cordova we're gonna have to handle this in a different way if we're on the web we can actually simply call download on this object and it will download the file it's really that easy kind of made for the web PDF make the again works on the device as well ah yeah whatever so save PDF download PDF is not a function yeah maybe I should call this download PDF instead we also haven't tried to capture our picture but let's try the basic one safe PDF and there we go oh we got our little logo image we got the date/time stamp our header from 2 and the test content and we see also the watermark let's also add a picture now using my camera I hope this works yes great image there we go now we can see it using image in the base64 data create PDF let's add some more data because you should see that it's real and then we get this a reminder from Simon to max we got the text we got the image we got the watermark once again working quite nice in the browser however as I said we can't use this behavior in on a Cordova device and therefore we're gonna have to apply a little change or a little fixing you so what we want to do is we want to get the data from the PDF object you can actually get the buffer data which we used previously to store like a blob data or you could also get the base64 string from the PDF object and once you get this let's bring this in and just talk about it once you get the data you can use the capacitor file system right file function to write to a pair which you can just create like PDF my letter or whatever a random string or whatever you want you could also leave this out because I used a pair like this I also had to include recursive true so the right file creates all the parent folders that's really important directory you can I think you're kind of free but I will always recommend documents or data I think I use documents in this example and that should be fine the data is actually the data and if you once again a little a little tip if you got something like this you can simply remove it and it will still work so if the names are the same you can use it leave it out just like with the path variable so this path ends in function of course take some time but with a weight and wrapping everything inside I think we can use it like this writes the file to your local file system on the device remember we're in the Cordova block and once it is written we can call the file opener now this is a Kodava plugin to open from the result URI which returns exactly the path to the file and specifying that this is application PDF I have left this line in here because I think if you enable this light it won't work so it is really important that you leave without I read some issues on github that it won't work otherwise so don't use it although it's perhaps written in the documentation for right file just leave without your basics you for data will be a PDF it will work just fine now we could actually try this on a device well let's do this all right there we go let's also add a picture yeah hello useful perfect photo really from to whatever let's create the PDF and then let's save it which will save it to the device file system and then hopefully also also hopefully open it I think my luck is full of the base64 data I shouldn't have taken a picture like this well here we go reminder the logo is there the data is there my image is there so it works on my iOS device as well it also works for Android but actually for annoyed I encountered a little problem since I fixed it I don't have the problem anymore umm that could be like nice quote but it looked like this inside Android studio I got packaged Android support does not on just not exist yeah does not exist it was an error related to I think the Cordova plugin for the file opener and to fix this I found a solution in a github issue that was to install jetty fire which helps to upgrade your Android project to Android X so install it run npx justify and run capacitor sing Android and then the Android project worked fine as well so if you encounter any error like this it might be the fix for your problem otherwise perhaps the Cordova plug-in was updated I'm actually not sure what's wrong so that's it so far I hope you enjoyed this tutorial on PDF make in combination with capacitor once again we've seen the capacitor lets us do the same things like before Cordova with capturing images using base64 data loading local files which actually works with angular and everything else is really dependent on your setup for PDF makes so go check out their playground on the documentation create the PDF file or the structure for the PFI let you want and then fill the information within your ionic application or whatever you want to use it and hopefully create some epic PDF file if you enjoyed this video please hit the like button and stay subscribed so you get notified about all the new tutorials quick wins and other app development and web development videos on this channel if you want to learn more about ionic with in-depth courses a community of like-minded developers so you can learn and build your apps faster you should definitely check out the ionic Academy which is my code school to help you with everything ionic with a huge library of courses material and a supportive select channel so we can get your app out I hope you enjoyed this video I will see you inside the next video have a great day and happy coding cyber [Music]

Channel: Simon Grimm

Views: 8,896

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, cordova, javascript, ionic 5, learn ionic 5, ionic 5 for beginners, angular 9, ionic 5 tutorial, ionic 5 angular, ionic 5 course, ionic academy, ionic tutorial

Id: QZ-CRdhxQbI

Length: 23min 10sec (1390 seconds)

Published: Tue Jul 21 2020