Create Your Perfect Invoice HTML Template for PDF for HighTech

Invoice html template for pdf for HighTech

hello okay my name is keleb adele i'm a software developer so today i'm going to be teaching us how to convert um our html receipt or invoice to pdf uh the there is always reason for us to want to create our invoice in html format so that we can you know bring in some effects some beauty adding some beauty to the uh the invoice unlike just using some pdf libraries to create the invoice so now this method works for any html view because the major thing we're going to be using is um javascript so uh without wasting much time let me just go to the code here i'm not going to be writing anything from scratching games already been written so now i'm just going to explain so now this is the scripts first of all um yes we are going to be using this library called html to pdf and where can you find it so you just go to uh just go to google and type in um just type in html to just type okay um okay let me get a go back so yes get to this place um so once you just type html to pdf just estimate pdf so it's going to give you different options so anyone is okay so let's see i this was one i picked so you can just use anyone you want so now on this site you're gonna get every instructions on how to use the library so so now they give you a lot of instructions on how to work with a library so you can play around anything you want say now this the options i'm going to explain this so let's just uh okay let's let's just focus on the okay so now this is a library extension or url that i use so once you just copy it so just just as i said data doesn't necessarily have to be from this place you can go through any of those links just ensure that you have the library at your 8th target so you put the scripts there so then let me explain the script and what is happening now this html is um for laravel laravel view because you're likely to be seeing some blade.php and things like that but the content is basically html and some little um laravel code now this a receipt is um this receipt is fetching data from so is uh is dynamic okay so it's not just maybe a static this thing so it's fetching data from the table so uh now let's go to the script so now concerning a good window dots on the wisconsin function so you know you just want to be sure you want to load the window and now the document just gets remember heidi so now this download is the id uh you give to the download button so let me show you what i'm trying to see here so you see this the id button here you name it anything you want but just make sure you have it's id it's any name but i'm using download here so we are getting what's happening is that we are getting this as a reference to this button here this download button now we are adding an events uh listener so we want to listen to that button that when a user clicks the button so there's a promise so we just returned now we save that into a constant called invoice a variable called invoice now this invoice this name can be any name all right so i just called it invoice so now we are also getting the documents by id of this invoice this entire this entire invoice so you need to put it in a div in in a deep tag or you know so but just make sure it is i did so now um i'm going to go to the beginning of the listing here um okay so now this is the invoice this is div of the invoice so i named it invoice all right so you can give it any name so now we are going to reference it that when the user clicks on the download button yeah on the download button here so now gets the element by height which is the invoice now these options was what i was about to need at that time you need these options your file name is b is going to be the name you want to give your invoice now the reason you are seeing uh this is because i told you earlier that this is a larger application and it is fetching from the database so you don't need to worry yourself about so i i can choose to clean it and just put any name that i want okay so you don't need to worry yourself about this so it's still going to save us that pdf so just for those that are dynamically you are generating your invoice dynamically so you don't need to worry yourself about this now the image type jpeg of course is going to force convert to image before now converted to pdf now the scale of the canvas so you can play around this you choose two one the weight is going to scale i mean the size of it is going to be different now you don't need to portrait of course you always wanted portraits and not landscape so now the this invoice here is what we have here so now these options is for this and you know just say so once you see it's download so if you don't want to save if you just want it to open on another browser then you just use stream but i i want it to be success already show the user the uh the invoice so there's only showing it again to them in pdf so i just want them to save someone once you click on save so you can see it has downloaded and let us open this okay so there is a connect and so this is the using the pda version you can see it has converted to pdf all right i hope you enjoyed the tutorial and if you have any other questions just leave it in the comments box below thank you