Create Your HTML Invoice Generator for Government Effortlessly

Html invoice generator for Government

uh Hello friends today in this tutorial we will be building a bootstrap 5 PDF enforce generator inside the react shares so basically you can see here this is the application so basically you can see there are different kinds of fields out there which is currently due date invoice number you can see PDF and voice generator returns so you can have the bins out there you can pay it like this let me open this on localhost I have developed this application so you can just put the bill here the email address the address who is paying from this like this and then you can also add the different kinds of items that you have purchased out here so you can put the different kinds of items this is a description you can also change the quantity as well then the pricing will also change like this you can all you'll also change the price as well like this this is in dollars you can now see sub total discount and number of tax which is involved you can also add multiple items right here this is the name of the description and then you can even change the pricing as well like this so you can see that so you can now see guys there is a button out there to get review invoice and also you can change the currency as well to Japanese even British pound as well like this Chinese you can also change to bitcoin so various kinds of currencies symbols are supported here Bitcoin United States dollar Australian dollar Singapore dollar so you can change any currency and basically you can apply a tax suppose I apply five percent Taxi and then I apply a discount of also five percent and then basically there is a button out there too just generate this invoice here so if I click this button here basically what will happen now you just need to also write this due date as well so select this due date so 29th of September so just you need to do this also let me have a filter so you will have this you will have this filter guys so you need to apply this so basically if you click this button here so basically this will be the window which would be appearing right here so basically this is the name of the person this design voice this is a billing built from date of issue this is command amount due the number of items which are purchased you will see quantity which is four three price and amount subtotal so basically you can download this copy as a PDF document if you hit this your invoice will be generated so in a PDF like document so you can now see this is nice little nice day formatted here you can see this is the name this is the amount you this is the price here you can now see Bill to build from date of issue number of items which are per set which is quantity description price amount subtotal task discount total so if you're watching it for the very first time guys please hit the like button subscribe the channel so we have styled this inside reactions so basically we are using bootstrap 5 for static purposes all these bootstrap window that you are seeing model window and also for static this also we are using jspdf liability for generating the PDF document and also HTML to Canvas Library so and also in order to download this as a PDF document we are using filesaver.js live to the inside react.js you can also send invoice to the email address which is mentioned here if you click this button so invoice will be automatically sent to that email address so you can now see so this is the overall project guys which we will be building in this tutorial so if you're watching it for the very first time then please hit the like button subscribe the channel so basically you can also just design voice here invoice for amount you this is a pricing and the amount here this is subtotal tax discount total so basically let me show you the libraries which we are using so for react basically we are using the react Dash bootstrap so react Dash boost bootstrap is specifically for reactions applications which is a specific framework which is available for react.js applications so bootstrap as you all know it's a front-end framework and it is the most popular front-end framework so it is rebuilt for reactors basically it has a lot of components out there model components input components form components so we will be making use of this dependency in order to create the interface of the application so now after this guys we are also using a library called as jspdf so jspdf is a library for creating Autumn PDF documents so we are using this Library you can now see how popular this library is 880 weekly downloads and we are also using HTML to Canvas to convert the canvas to an image so this is the library we are also using basically it is used to take the screenshots and convert it to a canvas and we are also using file saver Library file saver.js this is actual Library which is used to download the file as a attachment in the browser basically if you ever want to download any file using save as this is a save as implementation inside um the node.js application so basically we are using this Library and also we are using the for the icons that you see we are using react icons so this is a very famous library for react icons all the icons that you see inside this application the same voice PDF generator application these icons are coming through react icons you can see the dust screen icon this is all the currency icon all this stuff you would be seeing so let's start building this project from scratch guys so I have given all the source code in the description of the live stream so I have written a complete blog post on my tutorial website react so I have given all the source code so this is a step-by-step blog post you will find all the source code in the description of this live stream let me also give into live chat so that you can copy paste it so get full the full source code in the live chat I have given so you can copy paste all the source code in the pinchat I have given all the source code so now let's get started guys by building this application I will just make a new project which is make directory which is react invoice I haven't CD into this react invoice and basically here we will make a new project npx3 create react app PDF invoice so now basically guys it will create a brand new reactions application inside this project so you just need to wait for some time for creation of this project as it creates so we are just waiting for the project to so this will hardly take five to ten minutes in order to this project so if you're watching it for the very first time guys please hit the like button subscribe the channel after that we will the dependencies which are required for this application so it is just installing the react react Tom and react scripts Library so once it is installed we will the required libraries it is just installing it so four people are watching the stream guys please hit the like button only one like is their target live stream will be 50 likes so please hit the like button subscribe the channel as well bootstrap 5 is very nice for styling purposes it's a very nice framework you should definitely invest some time so we will go into this directory PDF invoice we will open this inside uh Visual Studio code text editor so basically guys now we will be installing all the dependencies so first of all we will bootstrap and also we will react bootstrap which is specific for react.js applications so I think the spanning mistake is there bootstrap both trap so if you this inside your package.json this these libraries will be listed here which is bootstrap and react bootstrap you can see it is installed it now we need to Simply the jspdf library and PMI jspdf HTML to Canvas as well so also these two dependencies which are required for this application which is jspdf and HTML to canvas and also guys we need to the file saver Library file saver file Dash saver basically this is a library which is required for this application so now you can see this slide grid is also installed here so I think we are done here and one other dependency which is required guys which is react icon so basically for all the icons that you see inside your applications you also need the react Dash icons so this dependencies you will also need here so simply this so now that's it now start your project by npm start so right here guys inside your app.js you will not need any header attack simply delete this all this stuff you also don't leave the logo so we will go by step by step guys we will write all the codes step by step so you will not have any sort of problem let me just so first of all guys we will write our app.js file so inside this file we will we will have a simple component here basically this will have these classes which is app display will be Flex Flex column and align items in the center position I have Justified Center all these classes are from you bootstrap 5 if you see justify content Center and the width will be 100. so basically guys inside this div We have basically we need to have a separate component for our application which will be the bootstrap container so you just need to import this bootstrap container guys inside this you will have a invoice form component so just write here just create a folder guys which is called as components so inside this you need to create this component which is invoice form invoice form Dot jsx so this is your component so RFC this is a functional component so basically now you can import this component in voice form that's it so if you now see guys you also need to import the bootstrap CSS and also app.css simply you just need to copy these lines so we are importing the bootstrap CSS you can see it is present inside bootstrap slash disk CSS slash bootstrap.main.css so now if you import this you will be able to use all these classes which are there here so we are using these classes so after this guys we are making this component here which is invoice form so here if you see here we also need to basically this will be a class level component so what we need to do is that we will need to Simply say that this needs to be a class level component so class app so basically this extends sub component so now write this so this is a class level component and basically you need to write like this this needs to be having this render method inside render we will have a return statement so at last we also need to export this export default app export default have I think we have copy paste it so now if you reload the application guys nothing will happen because invoice invoice form is empty right now so again this will be a app level class level component so right here inside your invoice form this will also be a class level component so basically what we need to do so here this out this will also be a class invoice form extends react component so basically this will be having a render method and inside this you will have returned hello world so here we need to also import the component so now if you refresh it basically it is compiled in voice.jsx cannot find the file let me see so just rename this to JS guys we don't need jsx so just rename this to Js like this so now it is C you can see it is compiled it and now your hello world is showing here basically so this hello world is coming from right here so now inside this file guys let me paste all the code here and inside notepad as we will write it from scratch so basically inside this file we will be having a simple form the bootstrap form basically from which we will be able to generate the PDF invoice you will have all the states out there for that we need to first of all declare some inside this Constructor inside this Constructor guys basically we will have some properties which should be passed to it even Paul super method will pass these properties and then we will be initializing our state so the state will be inside this we will have a variable is open false currency dot default currency would be dollar and current date will be empty by default and invoice number default invoice number will be one and date of issue will be empty by default invoice number what is the problem here sorry if you need to put a comma here so after this bin to we will be having this empty built to the email address this will also be empty little comma so here we will have the address as well this will also be empty build from this will also be empty so these are all the things out there which will be required for PDF and voice generated all these fields that you see build from email this will also be empty and Bill from address and then we have the notes which will also be empty the total amount will be in zero zero zero put a comma and basically we have the subtotal which will also be zero comma zero zero a tax rate how much tax rate you apply which was also be empty by default just wait because hello hello thank you foreign and after this you will have a discount rate basically this will be empty by default and discount amount this will also be zero like this all these variables we have declared right here inside guys inside of a state application so if you're watching it for the very first time guys please hit the like button subscribe the channel as well if you always in algorithm is favoring my channel so I think it's a really win-win situation for my channel so you can see this is the Constructor guys all the properties have been initialized so just wait guys I'm coming and just coming from outside so there will be a slight delay of two three minutes so just coming up to the channel and in the meantime you can just look at the highlights of the screen and please hit the like button subscribe the channel as well foreign thank you before foreign so I'm back here guys you can now see this is the application we have developed you have declared all the state variables so if you are watching it please hit the like button subscribe the channel so the next step will be to basically set the state so here you will call the this dot set dot items so here we'll be setting the items array so you can see items array that we have declared this dot state DOT types items this will be an array of objects each object would have a certain properties so ID will be a numeric value it will be zero name will be empty and the description description of the product and the price price will be default price will be one dollar and how much quantity you want to purchase so the quantity will also be at default one you can even increase it later on depending upon your so after this guys we will have this start sorry this is now data is declared guys for the application we have this state here all these variables are there and also this uh items which is an array by default so this is a state for this application guys so now basically we will write the HTML which is required for this component so inside our render method basically you will have a form element so this form will be imported from the react Dash bootstrap guys this will be a form or bootstrap component so inside the form guys we will have a row which will also need to be imported you will have a column which will also need to be imported column which will also need to be reported it's all these things you can see column form row so these are all short little components inside this Library which is a gap bootstrap so we will be initializing column the medium width will be 8 and the large width will be around 9 like this so inside this guide we will have a card component which is there inside bootstrap card component like this card so here we will be giving a class name to it of padding to 4 and padding in the extra large devices to 5 merging from the wide 3 margins from Y at extra large to four so these are all bootstrap classes guys and inside this we will have a div element inside this we will have another div and inside this we will have another div so here we will have the span tag so basically this span tag will be for currency so I think it's a very complicated HTML guys this is basically the form that you see on the screen the form that you see on the screen here if you see this is a form that we are developing here the current date due date invoice number all that stuff this is built using a card like structure which is our bootstrap and basically we have these fields out there so what I can do is that I can simply copy paste all the HTML which is required for this this is a long form so so that's why I am copy pasting it and I will write all the HTML JavaScript functions which are required for this so simply I will copy this and paste it here simply paste it guys this is all the HTML which is required for this we have a select next you can now see you can edit all these currency values United States Great Britain dollar Japan you know Canadian dollar Australian dollar Singapore dollar Chinese Bitcoin you can add more currencies here depending upon rupees if you are from India or tax rate you can see discount rate all these fields are there so basically then we have now we need to write the functions guys it will obviously give me errors because it will say that these this is not defined so right here at the very top import all these dependencies so you just need to import like this so these are all be imported from boots react bootstrap and we have this component button form card invoice item so basically we need to create these components here inside our components folder so this will be invoice item invoice item will be responsible for specific invoice item this is a component and basically we have this invoice model invoice model will be the actual component guys when we click this button a modern filter will appear we need to construct a component for this for showing that model windows so invoice model dot Js and also we need to have the invoice that's it this is all that you need to do right here so this will again be a class level component so I think this is class level component RF c r f C inside this guys we will have this class level component so basically this is the invoice formed by you can now see uh we just need to write a class level component here so basically we just need to import react from here import react from react so then this will be a class level components invoice item extends react component and here we will have a render method simply return something from here this is invoice then we need to export this export default invoice item so basically you need to copy paste the same here for this invoice model as well so just need to change the name here in voice model so that's it guys this is there here and now we are importing this invoice item and invoice model all these components we are getting it from react bootstrap we are also including the bootstrap CSS file at the very top so guys we will it will also give it is now compiled successfully you can now see if I open here react 3001 it will not show anything so if you see we haven't included this invoice for white thing invoice form uh whenever we are doing this I think in voice form basically inside app.js invoice form invoice form to paste it once again invoice form so now you can see that it is compiled successfully and basically if I open here react localhost 3001 basically you will now see this is a simple form here basically we have the due date billing to billing from invoice number if you change you can change it like this if you click this button nothing will happen if you click your due date if you pick the address so thanks for your business so you can also apply the tax rate discount rate as well if you click this button nothing will happen you can even change the currency as well you need to construct this model window for this so now we need to write functions for this guys which is very much easy so basically uh for this first of all we will write all these functions we have I will write it from scratch so if you now write this you will get some errors here just put npm start so if you're watching it for the very first time guys then please hit the like button subscribe the channel as well so basically we will write some JavaScript methods for this so up till now we have constructed our data which is a state of the application so now we need to write some methods so the very first method which will be we will be binding which is this dot edit field so whenever the field is changed we will bind this method here to this class level component and this is a life cycle method guys which we will execute which is component did Mount this is a method and here we will have the previous properties inside this and here we will say this dot handle calculate total this is a method we will execute inside this so here we also need to make a method guys which will handle the row delete operations so here the items will be passed to it so inside this we will have a index distort state DOT items dot index of as you see guys this is items is an array array of objects so whenever you create some items you will be looking at so you will access the optis dot state DOT items dot splice and we will remove it from one position like this and then we will again set the state path this dot state DOT items that's it so after this guys uh this event will be called whenever we need to add new item to array this is a method which is handle add event so here the event will be passed here so here we will get the ID like this we will have plus new date which will be inserted and basically will use the math dot floor method and here we'll use map.random and it should be multiplied by 999 so 999 999 and basically we need to change it to the string value to string 36 characters so it basically it will be represented in a string like structure and now we need to construct a object which is items so ID will be equal to ID name will be equal to empty pricing will be the default price will be one dollar and the description will be empty and the quantity will be basically equal to one that's this is your object now you need to insert this object we need we will use the push method inside the array basically the push method inside array basically inserts a new element insert a new object inside the array you will push it and again lastly we will set the state again back set State this dot state DOT items that's it and now guys we will write a method which will calculate the total pricing for the items that you have inserted so handle calculate total we will call this method so basically here we will calculate the total pricing of the product and here we will first of all get the items this dot state DOT items this will be an array and here we will be declaring a subtotal variable which will be starting from 0. and here we will map all the items using this map method for each item we will say we will calculate the subtotal like this subtotal so here you will use the parse float method and basically here inside this you will pass the subtotal and then we will be concatenating it by parse float once again and basically here we will only be getting the pricing property of the items so we can do this by using items dot price so if you closely notice each object has this property called as price so we converting it first of all the floating Point Parts float and then basically we also need to convert this to items dot price to to fixed value to fixed and here two two and then again you would multiply it by parse int and how many quantity you have purchased so you will say item dot quantity again we need to convert this to two fixed we will again call this method 2 and here we will pass 2 that's it so this will have your subtotal guys which will be initialized so now we just need to set the state so for setting the state here again for this dot set state and this will be setting the subtotal which will be equal to parse float subtotal and then we will be calling two fixed two that's it and also guys inside this we will have a callback function so basically inside this callback function we will again call this dot set State inside this now we will be calculating the text amount so tax amount will be equal to once again parse float and inside this once again you will call parse float you pass the subtotal which inside this function as a argument and basically we will divide this we will be multiplying it with this dot text this dot state DOT text rate so how much tax rate you have applied we will need to divide it by 100 so this is somewhat max math guys which is going on here so I'm little bit weak in math so that's why I'm just copy pasting it that's it so this is now calculated the text amount guys similarly we also need to calculate our discount amount as well so again inside this callback we will have a discount amount this is again equal to parse float and here you would say parse float again you will pass the subtotal which is calculated and now we need to apply the discount so here we will be multiplying it by again this dot State DOT discount rate and then we will be divided by 100 this is all these values will be in percentage that's why we are dividing it by 100 to convert to actual values lastly we will again call 2 fixed two that's it so lastly guys we just need to set our state so this will be we will call this dot set state so here we'll be having the total amount which will be equal to subtotal minus this dots state DOT discount amount discount amount and here inside this amount we would be concatenating our tax amount this dot State DOT text amount so I think this is the overall function guys you can now see so if you're watching it for the very first time guys please hit the like button subscribe the channel as well so three people are watching the stream please hit the like button subscribe the channel as well if you're not like the video so this is the overall function guys which is handle calculate total if you clearly see so this is handle add event and this is a function which is handle calculate total so this is the overall function guys we have written like you can see that after setting the total State here this function is over now we need to Define this next function which is responsible for all item when the event is edited in that case we need to get the item we need to construct the object ID will be coming through event.target.id name will be coming through event.target.net and the value will be coming which should be event.target dot value so now we have constructed this object now we just need to insert this so let's first of all get this dot state DOT items dot slice and then our new items which needs to be inserted so here we'll say items.map for each item basically here we will use curve for Loop where key and item simply you can say pass your items so here we will first of all compare if key is equal to 5 term dot name and items dot ID basically this is the function we are performing here guys let me paste it so here we are just checking the name and the ID property if it matches then we are returning the items and lastly guys we also need to set the state so we'll call this dot set state the items will be equal to the new items and lastly we need to follow this function which is handle calculator total so now we just it will calculate the total amount of all the items which will be purchased by the user so then we will have a different method guys which will be edit field and this will also be a method so we need to Define this so inside the parentheses we will pass the event object here like this so inside this guys what we need to do is that we need to set the state so we will call this dot set State and here we will be having our event.target.name this will be equal to even dot Target dot value so lastly we also need to call this dot handle calculator so basically this simply means that whenever your items are changed inside the input field we just need to again calculate the calculate the total function so all these items when it it is changed so please hit the like button subscribe the channel as well guys so whenever the currency changes there is a select out Outfield here for currency so whenever the value changes for that also we will have the selected option as a property and here guys what we will say we will set the state this dot set State and we will say that selected option selected option right so now to when we click that button guys we need to open the model this will be an event foreign so first of all we need to prevent Auto summation of the form so we'll simply say that event Dot prevent Auto default so we will call this dot handle dot calculate total and then we will be setting the state this dot set state and call is open to true that's it so similar to this we have the closed model function in order to close the model window so there will be an event object so for this we just need to set the state inside this variable we just need to make this Boolean parameter from True to false so that that will eventually close the model window for us so now we have defined all these methods which are responsible for this component so now we can close this file and basically create this invoice model so basically whenever we press this button we need to show a pop-up window so if you're watching it for the very first time guys please hit the like button subscribe the channel so inside our invoice model guys this component I think is complete so invoice model basically let me paste all the dependencies which are required for this so this is invoice model uh let me just write before that we will write our invoice item basically invoice item is very much easy component invoice item is nothing but the details regarding a specific item so here first of all you will import all the dependencies which are required at the very top so very importing the react bootstrap table component button component editable field component so here you will be showing your inside this uh basically uh inside our render method we will have on item this will be equal to this dot props dot on so all these parameters will be passed as a property so that's why we are getting it like this this dot drops dot currency row delete this top drops dot root on Roblox and basically we will have the table so this dot props dot items this is a actual items array so for each item basically we will be displaying a he would be returning a row so here we will be simply be saying return and inside this we will have item row so item row if you see guys just you need to paste this here so basically I think it's a separate component item row this is invoice item so item row so we are passing these dependencies on items edit I actual item on delete event key currency so here we are passing all these information so right here inside our return statement guys we will have a simple table so this will be a table P hat this is a bootstrap table so we will have various headings inside this table basically which is the item which you are purchasing then we will have our the quantity then basically we will have the price right price rate and then you will have the action basically here you will be class name to text Center so here you will say action so basically inside your when this is completed you will have a table body tab table body and inside this we will render out the item table and lastly guys after this table you will have a simple button component and basically here we the label of this button will be to simply delete so the button will be simply add item so basically you will have to assign some parameters to this button guys so you can attach a class name which is FW bold and when we click this button we need to execute this method which is on row add that's all so here you can see that we are instantiating a new class which is called as item row so we need to Define this class at the very bottom of the screen you see here we need to Define this class which is class item row basically it will extends react component and basically all these parameters we are passing it this function this actual item on delete event actual key and the currency so here we need to we will be getting all this in the props of this component so here we will be rendering out Simply inside this so here we will be rendering out table row guys styling will be equal to width will be equal 100 for the table and inside this table data guys we will have a editable field basically this is the component we need to make editable feed this will be our editable the user may able to change the values from the name itself I'm not doing any job it is just the fourth time youtubing and blogging so so here guys you all we will pass all this data which is to this component so we need to create this component which is called as edit table see dot Js so right here if you see we are need to pass some information to this on items item edit so this is equal to this Dot prop start on items so we will pass this function as a property then we will also pass from cell data which will be of the type text basically inside this cell data guys we will have some properties for the name of the item basically it will be coming name uh default value placeholder it will be item name then we have the value which will be coming this dot props dot item dot name and the ID which will be desktops.item.id so similarly guys you will have another editable field this is the same component so inside this now we will pass the actual ID on items edit desktops.com items next again we will have cell data this time type will be of text and name will be description of the product placeholder will be let's suppose item description value will be coming again from this dot properties dot item description and ID again will be coming to start crops dot item dot ID that's it so again guys after this TD tag once again this is one TV Tag completed now see this is holding the name of the product in the description if the next TD tag we will be holding our actual pricing and the quantity how much quantity you want to purchase and how much is the price so you need to set these here and for starting this we will again have the minimum width here which is so here you will say the minimum width will be around 70 pixels again we will use the same component guys are inside this this time we will be passing again all this information cellular data this time this will be type number quantity minimum minimum value will be one and you will stop it by one value will be again this one this dot props dot item dot quantity and this way and after this you will again copy this for the second time and this time this will be for pricing so I think this will be in the separate TD tag and simply paste it so this will be for the currency guys so which currency you the user has selected this dot properties of currency default value will be 0.01 you can now see that this is for the price and lastly guys we will have a simple Dustbin icon basically here you can uh either delete the item or add it like this basically this is the react icon that we are using buy trash you can see all this will be imported from react icons so that's all this is there inside this class guys so now we simply need to I think it's complete right here this component is also complete so now we will move to our items model here editable field so now we need to write this component guys which is called as editable field this is nothing but let me paste this code here so inside this code what is happening guys basically we are getting the properties here which says here we are passing it all these properties to this component cellular data and on items item edit so here we are grouping it and now you can see we are attaching all these properties which is text aligned placeholder minimum Name ID value step Precision name automated we have this form control element inside bootstrap we are grouping all these elements right here it is coming from here invoice item is also complete and voice model is remaining so if you refresh your application now inside this price only the invoice model will be remaining so invoice model is very much easy if you see please hit the like button subscribe the channel if you're watching it for the very first time so if you refresh it so it is saying that inverse invoice form let me invoice form paste this invoice item paste it invoice item editable field editable feeling cheers so now you can see this is their form here basically this is the date you can select here invoice number you can change it and you can fill out this field Sir with the name address and the email address basically this is the Sprint icon if you click this item you can see that now you can add as many items as you want you can have this Dustbin icon you can change the quantity you can put the name of the product short little description quantity as you increase the quantity again now the price will change automatically at the bottom side here of the screen you can even apply the tax rate as well as you apply the tax rate you will now see it will automatically change as you apply the discount rate it will automatically the price will decrease and the currency you can see you can even change the currency to Japanese Yen Bitcoin any currency will change to now if this is the functionality which is remaining guys if you hit this button the if model window should appear and here we have created this invoice model and for creating this component guys it is very much easy now let me show to you how it is done so this will contain the actual logic behind this application we will be importing all the dependencies right here at the very top so jspdf HTML to Canvas you will now see file saver all these dependencies will be imported here right at the very top so basically guys inside this let me just write this Constructor and all that stuff so now you can see that guys we have this inside this model window we are showing all these properties this dot drops dot that we got if you refresh it now it is saying that we have declared report react multiple times so just do it like this so now if you hit this button it is saying that it is compiling it so just wait it is saying that generate invoice is not defined so we need to Define this function guys which will be actual function which will be responsible for generating the invoice so at the very top you can Define this function which is generate invoice so just Define it now your application should work you will obviously this is a nice little model window if you click it you have this button if you click this button nothing will happen you need to create it a PDF document for this so now we need to all this information you will be displayed here built to build from date of issue price amounts of total tax discount total so now we need to write the most important function guys which is the actual function which is responsible for generating the PDF document this function we will write it here we'll call first of all the HTML to Canvas method guys we will take the screenshot document.theory selector and basically here we will pass the element to capture the screenshot so here we will be capturing the screenshot we have given the ID which is invoice capture like this and this returns a promise so we'll say dot then so this Returns the image data variable or canvas it returns canvas so here you will simply need to say we need to convert this canvas to a data URL so what we can do is that we can simply say image data this data will be in base64 format so canvas dot to data URL and here we will say we need to convert this to a image slash PNG PNG image we need to convert it 1.0 and now we need to construct a PDF document guys using jspdf so we say that false PDF Dot and new Js PDF and here we will pass an object guys so the orientation of the PDF document will be either can be portrait or landscape but we will be giving portrait unit will be equal to point this can also be in inches format is 612 792 this is actual format of the PDF document so after that guys we need to set some properties for this we give document which is PDF internal Dot scale factor which will be one and after this we need to get the image properties which will be coming from PDM document PDF dot get image properties so we'll pass the image data right here we pass the PDF width so PDF internal Dot Page size dot get with this is a function we have got inside jspdf to get the width of the PDF document similarly we will be having the height to calculate this PDF dot internal Dot Page size dot get height so for calculating the height it's slightly different guys the concept we will use this formula basically to calculate the height let me just explain to you so image props dot height multiplied by PDF width multiplied by image cloud storage now lastly we will add this image to the PDF document image data and this the format will be PNG X and the y coordinate 0 0 and PDF width and PDF height and lastly we will save this guys as a file which is called as invoice001 dot PDF that's it that's all guys which you need to do first of all we are taking the screenshot using this ID parameter that we have defined here in voice capture if you in voice capture if you can see we have given this ID to this element so we are taking the full screenshot using HTML to Canvas here of this whole element and then after taking the screenshot we are storing this inside the base64 code and then we are embedding this image using add image and then saving the PDF document that's all which is there if you click button click on download copy your PDF document will be constructed you will now see it has taken the image and inserted this image onto the PDF document you can see the quantity description price amount subtotal tax discount total this is very much useful for companies if you are making selling products it's very good application which is there it react.js if you want to if you're watching it for the very first time guys please hit the like button subscribe the channel if you're watching it for the very first time this is very awesome little application that we have developed this is react Chase uh PDF invoice generator inside HTML to Canvas and jspdf Library and also here downloading it as attachment so it's very good Library you should definitely download all the source code I have given all the source code in the live chat so this is inside live chat I have given all the source code guys you can see that get the full source code so please hit the like button subscribe the channel as well and now if you want to ask any sort of question answer to be able to question answer session type you can ask any questions that you want to ask here once you subscribe the channel as well guys if you're watching it for the very first time so you can see that guys the subscriber goal is 89 so please increase the subscriber go to 100 only 11 subscribers are remaining so if you haven't hit the like button or subscribe button please hit that like button subscribe the channel as well if you're watching it for a very first time uh laptop is around 60 000 from currency and I think the model is Asus tough gaming F50 you can also search this model on Amazon so two years back I purchased it so it's also very giving nice performance Asus is a very good company when it comes to Performance level the it is also good for gaming as well if you also want to do gaming on this also it is good for programming all the major applications work very smoothly yes 60 toes yeah I would I'm using it almost full day 24 hours and folding it live streaming it so it is taking the full load so I think it's a better performance sometimes I you know pubg PC sometimes not only is there I will be any problem if we quote react in Windows 10 home version there will be no problem at all I am using the Windows 10 operating system you can see this is Windows 10 so I am not facing any sorted problem definitely you will need to this Visual Studio code this is the actual code editor which is preferred by all the programmers so I think this Visual Studio code is the what editor to go great thanks for the information have a great day and please hit the like button subscribe the channel guys if you haven't hit the like button and subscribe the channel also hit the notification Bell icon if you are new to the channel let me add a poll here guys which is your favorite programming language it's a JavaScript is it python is it PHP is it Java I think majority of the votes will go to JavaScript as JavaScript is more reliable language phpi thing will be getting the least votes so just wait for the survey to complete so basically I want to learn to handle levels because just with one sentence and react the whole page cut server what to do I have been coding in C for the past five months your react is somewhat difficult at first but when you practice and create some basic level projects you will be getting by it here so I will be definitely be telling you that first of all create some projects inside rear chairs such as credit kind of an application to do list and basically you need to first of all get the concept before you can create some Advanced little projects you can watch videos of mine I have created a very basic projects a lot of videos is present on reactions so Kamil you can just watch the videos of mine or you can also have watch YouTube videos as well all the YouTube related content so you can watch and react shares C plus plus C I think is overrated or outdated languages alongside with PHP know what uses C plus plus nowadays everyone uses JavaScript ever everyone uses modern languages such as JavaScript typescript node.js Express reactions so I don't think so C plus plus is that much popular you can see in the poll itself Python and JavaScript are the two languages which are most popular python is well in the future python will be the way to go python is very easy as compared to JavaScript it is a very minimistic syntax python have so embedded Hardware okay okay C plus plus still have applications still have a long way to go before it will completely vanished but still it is used in many operating system games as well so game engines so I can't fully say that C plus plus is not used okay thank you Kamal for appreciating the content I highly appreciate your comment that you have made thank you 100 okay bye have a nice day and thanks for visiting the channel and liking the content make sure that you come to all the videos that I make