WEBVTT 00:00.000 --> 00:05.400 Hello friends, today in this tutorial I will be showing you that how to export html with 00:05.400 --> 00:12.480 custom css to a pdf document using js pdf and html to canvas library 00:12.480 --> 00:22.000 So this is the end product we will be getting here. You can see this is the html heading, x1 heading and it is having a black background and the 00:22.000 --> 00:30.280 text color is red. So some css properties is being applied to this x1 element and we have successfully exported 00:30.280 --> 00:34.280 this to a pdf document. So you can see its a pdf document 00:34.280 --> 00:43.160 So we are making use of js pdf library and html to canvas library which actually takes 00:43.160 --> 00:49.560 a screenshot of this. So its a very famous library, these two libraries 00:49.560 --> 01:00.000 So let me just show you the application. So if I open this, its a javascript application, download pdf button is there, so click this 01:00.000 --> 01:04.879 button, pdf file will be downloaded and you will see this result 01:04.879 --> 01:10.760 So all the source code regarding this application guys I have written in the video description 01:10.760 --> 01:16.440 This is the blog post, inside the blog post you will find all the source code that you 01:16.440 --> 01:23.880 will need here. So just go to the video description link. So now lets get started by building this application guys 01:23.880 --> 01:27.960 So the very first thing you will need, you need to import all the dependencies 01:27.960 --> 01:34.479 First is the js pdf and the html to canvas pdf library 01:34.479 --> 01:38.620 So just go to the video description link and get these libraries 01:38.620 --> 01:48.420 So inside the body we will have a simple button that download pdf 01:48.420 --> 01:55.740 So we will be writing a simple function which will be download pdf and we will be giving 01:55.740 --> 02:08.220 a id to it of download pdf. So what we need to export here, we will be having a div which will be having say id of text 02:08.320 --> 02:17.940 So inside this we can define a h for heading and this will be, this is simple heading 02:17.940 --> 02:24.579 So now for styling it we can give it a id to it of heading and we can write some styles 02:24.579 --> 02:31.020 of course. So we can target this heading by this symbol heading 02:31.020 --> 02:42.400 We can change the color of this to red. We can change or we can change the color to yellow lets suppose and the background 02:42.400 --> 02:53.840 color we can change to black. So now you will see that if I open this, you will now see this is a simple yellow color 02:53.840 --> 03:06.400 text and a black color background and a download pdf button. So this is quite simple in order to export these to a pdf document, we just need to write 03:06.400 --> 03:20.480 this simple code. So we need to write this function here which is this download pdf 03:20.480 --> 03:31.320 So we will simply say that function download pdf and first of all we will target the button 03:31.320 --> 03:42.679 which is we have given it a id of download pdf. So we can manipulate the inner html of it 03:42.679 --> 03:50.680 we will say downloading and once the state is completed we can once again change the 03:50.680 --> 04:00.720 value that is download pdf. That's it 04:00.720 --> 04:04.920 So now in between these guys we need to create our function 04:04.920 --> 04:12.440 So mind you this will be an async function so just make this function as async and now 04:13.200 --> 04:24.000 inside this guys at the very top we can declare a new instance of js pdf like this and here 04:24.000 --> 04:29.640 what we need to do is guys we just need to use the wait keyword and then we will use 04:29.640 --> 04:37.800 the html to canvas library and here we just need to pass the id of the element for which 04:37.800 --> 04:47.680 we need to take the screenshot. So we need to pass this id this div this is the actual element we need to take the 04:47.680 --> 04:59.680 screenshot so we will provide the id text. So put a comma and then it takes a lot of options here in curly brackets first option 04:59.680 --> 05:09.680 will be use for this can be either true or false and then we have allow paint this also 05:09.680 --> 05:17.520 has a true false on this and lastly if you check the documentation you will find out 05:17.520 --> 05:27.160 I have given this in the video description and last property is the width property so 05:27.160 --> 05:36.320 I will provide it as 520 and then it returns a promise size .10 it returns our actual canvas 05:36.320 --> 05:48.640 and this canvas we can export it to a pdf document by converting it to base64 code so 05:48.640 --> 05:56.080 what we can do is that here simply we can export this to base64 code .add image as a 05:56.080 --> 06:07.760 function in pdf and here we can simply say that canvas2 data url and here we can simply 06:07.760 --> 06:16.880 pass the image which is image slash png and the second argument is this is a png image 06:16.880 --> 06:24.719 and then that is in the y coordinate which is 5,5 and the width of the image which is 06:24.880 --> 06:32.640 500 and the height will be 200 to maintain the aspect ratio and after this guys we can 06:32.640 --> 06:38.640 download the file which is you can give any name of your choice I will give as output.pdf 06:40.000 --> 06:47.840 so if I open this application now click download pdf some error has taken place let me see 06:48.479 --> 06:59.679 document oh sorry this needs to be capital e let me now see here 07:07.120 --> 07:19.440 once again at line number 67 I think get element by id 07:27.919 --> 07:33.599 so now guys as I hit this button a pdf file is downloaded and now you can see it is kind 07:33.680 --> 07:43.440 of blurry here you can't see the complete size so for fixing it we can give it a fixed width to it 07:44.160 --> 07:53.200 so in a style property here so we can write the inner style here which is width we can provide 07:53.200 --> 08:01.120 500 pixels so now this will not look blurry so you can see that 08:04.560 --> 08:12.080 if I see here so I think this is coming because we are having these properties which is these 08:12.080 --> 08:20.640 properties so if I just uncomment this if I don't have these properties so then this will not be 08:20.640 --> 08:30.960 having I also have zoomed in so that is why you are seeing the higher value let me zoom out a 08:30.960 --> 08:39.360 little so this is the normal value so you can see that guys let me 08:45.439 --> 08:50.000 so in this way guys you can manipulate any property you can change this color to blue 08:56.079 --> 09:06.719 and now if you have this so it can convert to any color any css property you can also change the font size 09:11.680 --> 09:20.719 font size to 13 pixels 09:28.959 --> 09:35.760 so in this way you can convert any css property export it to a pdf document 09:36.800 --> 09:44.160 so I think these options I was I was missing here you will see that so if I pass these options to 09:44.160 --> 09:55.839 the jspdf constructor so this these options so once again so now you will see that now it is 09:56.560 --> 10:03.920 looking good you can see that so we need to pass these options here so just go to the 10:03.920 --> 10:11.680 widget description link and pass these options and you will be able to convert any css property 10:11.680 --> 10:23.120 to pdf document so so let's suppose you want to have a instead of background color 10:23.120 --> 10:41.600 you have you have to have a background image so here you can provide a url so I have a image which is hosted on my website 10:41.920 --> 10:48.560 which is hosted on my website prokosto.com let me try if it is working or not 10:58.960 --> 11:05.840 so now you can see it is just working it has saved the images the images will not work 11:06.400 --> 11:11.200 but apart from that if you have any sort of css property you will see 11:11.200 --> 11:15.600 the color was preserved but the images will not work from a url 11:18.480 --> 11:24.560 apart from that you can use any css property so thank you much guys for watching this video