Django Course Part - 11 || Create Html To PDF With Dynamic Data Using Xhtml2Pdf Package

hello everyone welcome to my channel so in this video i'm gonna talk about a very important thing uh which i also struggled a lot in the beginning when i wanted to convert an html page to the pdf even with images so i figured out and i thought in the current course i'm running the product management application and i want to add that feature okay so that feature is super important so let me see how it will look a little bit of demo this is the name and this is the description and i also want to convert our image fields into the pdf format so all of those h1 tag paragraph tag and image files would be coming from the database and you can create a button and create pdf and it will convert it to the pdf format like this and you can do it for any kind of report generator in a website you might need it so let's see how you can do this so first what you need to do i have uh some apps like i have static files i have in the static i have images file all of those thing so all of this thing are set up properly so in the accounts i have another app in the product management this is our root directory of a root project if you go to the setting as you can see we have products app and accounts app okay so we have two different for account for login registration and product for product management and the urls also we have added the apps for account and the apps for products and we connected the setting media url and the media root url as well for the image data because in the static as you can see we have this images data and which uh how it we are linked it with as you can see in the settings.py file we have our media url is this images and our static url this is static and study files directory without path to join and that is static okay and static route is way too path to join base result and static files and the media router is static slash images and media variable is images because in the images directory we have all our images so we will convert all of this thing into pdf format so we need to we have a media file and we also have a backend of mysql that is connected make sure that in the exam you just start the server at the port and that apache server and mysql server make sure it is started okay so after you do that just uh go create another app go to your python shell and write python manage dot py start app and its app should be pdf convert okay want to convert something into the pdf okay or you can name it anything but i'm i'm naming it pdf convert okay so what we need to do we need to go to the main pdf convert app and go to abstract ui and just copy the same thing app config and you need to go to the and your app name is pdf underscore convert okay now we need to add it to the main settings dot py file so go there and here you will write your app name is pdf underscore converter pdf convert okay pdf convert dot apps dot pdf convert config okay so this is your main app name pdf underscore convert so save it so save it and then you just need to just create an ul dot py file i will need it urls dot py file will keep it empty for now but later we're gonna use it but in the models we don't need any model we will import the same model from the products app that model okay we will import all of those things at first i want to create a simple page where there will be all the dynamic information and the button to create the pdf okay so i'm gonna create a new folder called templates and the templates i'm gonna name it name it pdf underscore convert for the naming convention and i'm gonna create a new file here i'm gonna write show information show info dot html so it will work as our base template okay for base template to show all the information now i'm gonna go to the boots strap go there get it started we need a starter template uh let's add this thing start a template just paste it as you can see everything is added this is to show info and this is show information this is script that is coming from the bootstrap and here we're gonna go deep of class container and give off class row justify uh content center this is just a boot step class and we're gonna write div call uh deep of class call md uh suppose six okay call md eight okay this is fine so here we'll have our table so we need a table to show the information like in the components let's search for bootstrap table as you can see we have a table format let's copy this one this looks perfect to show the demonstration so in this places i want to have our main table okay so this should be our id and this should be our product name product name and this should be our product category and this should be our price let's copy this thing and these things are the column name as you can see but we have in the models.py file in the model.po file of our products we have image name image category price description name image and first we need an image image and this should be an image the name category price and then we don't need to show any description but we will add is published and created is published and created it this published is published created at okay so it's published created why want to see all the information in the table form so we don't need all the row we need only one row in the t body we need only one row let's say just copy this thing again one two three four five one two three four five six go to the pdf convert and go to the our main views dot py file here and we'll create our views the for that we need our models okay so we will write from products this is our main app products app we need to import that model product model okay dot products dot model import product we'll create a function dev show products show products it will take a request and it will fetch all the products so products is equals to product dot objects dot all and we have a context and its name context dictionaries products products and we pass the context to the render function and the render function takes three parameter request and its pdf convert which is that templates we have a pdf convert folder and in that we have a show information so we need that thing pdf convert slash show info show info dot html and pass that context okay we'll show all the products in the show products database okay and send it to that page of show information dot html now we need to go urs dot ui file to write uh from django dot urls import path and now we need to write url patterns patterns and it will take a path of show under uh show products okay show products and we need to get the function from dot import views we want to import our views and get the function to show products okay this is our function and it will have a name so that we can access it and its name is show products okay it will show all the products it's perfect and we need to add that urls to the main urls.poi file which is product management's url to so we're gonna add just copy this thing paste here this is pdf slash it will go to the pdf slash uh this app name should be here pdf underscore convert this is our app name and when we go to the pdf it will show us it should be dot urls okay so this is our main app url we are connecting our root project url and name it and and taking the pdf convert as our app name so app name is pdf convert okay so we are adding our root level url.py file with our app level url.pure file and it will go to the pdf slash show products okay pdf show products and i go to the show product page show product page will show all the product that is coming from the database okay that's fine and this is a simple content dictionary that we passing in the show information so honey go to the show information dot html it will show all the products let me see if it is coming from the database or not let's write for product in products and this is n4 let's add and first what we want is products dot id okay in the first table i want products dot id in the second table i want image just copy and paste all of this thing first i want image dot url because image should have anywhere else then we need uh image name product.name then we need product.category and dot name because category has they also have a name and then we want is published is underscore published and then we want uh this should be product not products okay then product dot created at okay so publish created that image name and we also need a price image name price category image name let's copy one more thing this is for price category okay let's organize this properly id name image url price category name is published created all of this thing let's create our server let's run our server python manage dot py run server if we go to slash pdf show products okay this is our image name price category is coming all of this is coming from the database it's perfectly fine no issues whatsoever let me give call md 12 and let's see if it is working now it's look it looks much much much better in an image tag we need an image tag image tag and image has a source attribute let's cut this and paste here okay now it looks better okay let's see this okay it is huge in size we need to a height of 60 pixel width of 80 pixel 70 pixel it's fine let's see okay this is this looks better but i think this should be height should be 80 and which should be 50 it is better okay it looks far better we have an id of the product image name price category okay its name price categories published and um created it okay all of this thing is added properly now what we want in the table in the container uh in the container we have this so inside the container we need to have a button we need to have a link with class of button button primary okay and it's button name should be create pdf it will create our pdf when you click on this button okay so let's keep it hash and let's see okay we want to generate our pdf based on it okay okay let's give it a little bit of margin of two let's see how it looks okay it's better okay i want to create a pdf based on it so let's make one more page which is a html page which is report pdf report pdf report pdfpeople.html okay edfree.html so this will work as so let's copy all of those thing and paste here this is for pdf report but in that page we don't gonna need a create pdf page because it will be converted this page that pdf report will also have all the information that we want but we want to convert it to the pdf from this page when i click on this button it will convert everything in the show pdf file show report pd show repo pdf repo html and the pdf reported html all the content that you see coming from the database will be converted into pdf format okay when you click on this button from the show information page as you can see when you click on this button it will redirect us to pdf report okay so we need to create one more function and for that we need to go to the django documentation of xhtml to pdf okay this is the latest documentation that we have just have to follow documentation just installation go to installation and install this pip install let's copy this i x html to pdf just install this uh packages get out of the shell and let's write uh just paste it here pp install html to pdf so i already installed it so i don't need it but in case you have to need it okay you must need it so let's go to views.py file and let's add all the thing that we need we'll need uh from django.http import http response okay then what we need uh from from django dot template dot loader import get template we need to get the template which one to render as a pdf format then we need from x html that's the package we want to create into the pdf format so from x html to pdf import pisa okay in this model we need to create that uh import that class to create the pdf then we need so we need http response we need to get loader and that visa and that model that we want to get information from now we need to write this is for show products and this is for when pdf it should be pdf report so we need to create it so give it a proper name and give a request and we want all the products from the database again okay same and in that products we also need a context and all of those thing but let me go to the documentation and see the uses so in the users page you will see the xs table in django users okay so for the django we need this kind of function let's copy all of those thing just paste it here okay the file this is this is the content with we want and paste here okay so so just delete this now we don't need it anymore so our main object that we the report that we're going to find product.object.all these are all the products that we're going to show with the template and our template path is pdf underscore convert slash pdf report dot html so this is our template pack pdf convert slash pdf report.html so we'll go to the pdf convert app this folder and we'll render pdf report.html okay this is very important and the context will pass is these products and let me copy products this is our template path okay and that we into render and this is our context and the context we are getting is that all the information then we need just uh just delete all of those thing so in the response we want http response that we get from here the http response is content type should be application slash pdf if you select any other format like c as v format it will convert your http response all of those page system pages into csv point but i don't want it let's convert it to pdf and our response of or in the response we have a content disposition and if you write attachment and file name this is the file name that your pdf will be named okay so name it different like products report dot pdf okay so make sure it is dot pdf format and if you write it as attachment your pdf would be downloaded but i don't want it to download it now so let's delete it make sure in the disposition your file name should be same as this file name when you just download the pdf okay and then we need template is equals to get template which is template dot loader import gate template it will get a proper template for us our template path is this template but pdf slash convert pdf report.html that html page that we want to convert to pdf format so for that we need to get the template okay and then we have a function template dot render we want to render the context that context we want to render the products information that we are getting from the database the render and then it will go into the html variable then in the pci status if pisa dot create pdf this is the main function that will uh create the all of our html pages as you can see in the pdf format and period and we're creating the html format of that html pages that we want to render into the pdf and our test is for response we don't need that call back now this is not needed our test is that responsible destination is that response okay and when to create the pdf of which page this html page that you want to render the context and the context is the all the things that we want to render like products coming from the database okay and so we are creating pisa.createpdf of that html page and destination is equal to response if pisa.status is equal to error then we'll see some error okay it will also check the error functionality so we are just getting all the products from the database we are giving it a template path of which uh folder and file we want to render to the pdf and then we have a context and then we have a response of http response of contact type of which type the pdf we want the disposition and the file name all of those thing and we have to get the template and the template is that template path okay template path and in the template we have rendered we are getting the template path we want to render something that is coming from this context okay then we have to uh create pdf of the html page that have all the data there to render and the template path okay so this is the all the information functionality that you want just copy the pdf create and go to the us dot py file so this was the pure file let's me create another path this is for create pdf okay so it will go to the pdf create pdf another one create slash uh pdf show products and it should be create pdf okay pdf create pdf so we will write it views dot pdf report create and name should be name should be create pdf let's give it create dash pdf and create dash pdf okay and we need to give that name to that file of show information here we want to connect that thing we're gonna pass url off that thing create pdf create under create dash pdf to create when you click on this button create pdf on this show information page it will create all the pdf for us it will go to the create pdf directory and views.pdf create report create and it will create the report for us as you can see just save all of those files and go to the show information and this is a create pdf function that will trigger when i click on this button let's see if it is converting it or not let's check it out okay we need to run our server okay our products is running let's create pdf click on this it will go to the pdf uh create pdf okay so we have an id image name price category um it's published all of this is properly showing information but it you can design it later if you want but the image should be a image for it has a products in products okay in this place we need a url in this place we need url because this is show products page but we need to go to the create pdf page which is this one this is the pdf create page which does not have any button and we need to select it product.image.path we need the image path let's see if it is working or not create pdf yes now it's working perfectly as you can see we have images id name price categories published all of those things you can design and give any hd css html all of those things just if you want to give it some color like some css property rename because in the category way i want this okay and in the product name i want to make it bold let's cut it here and paste it okay let's try this again as you can see my name is bold our price is given here and our category is a has some css property to it and everything is your report is working fine and you can customize it and make it more perfect for you and you can also click on download and it will download as name of products report as you can see you can see perfect now if you go to the field.py file when you write uh content first you have the http response of content type one to response of application.pdf as a response okay so that's why it says destination is equal to response so we want this as a application of pdf format now if you write it suppose csv format and the file name should be product reports dot c as v it should be in different format remember that if you write attachment and if you save it now let's go there as you can see you have comma separated value of product and when you click on this button first you let me go to the show products when you click on this button create pdf as you can see it will give us direct the download option and if you download this click open this is the csv file comma separated values as you can see but this is it doesn't work very well i suggest you not to do this because this is for pdf creation and it should be pdf okay and give it an attachment if you want to click this button and download it as a pdf as you can see in the pdf format otherwise if you don't want attachment just write it like this way and click on this button it will directly go into the pdf page so this is all the things that you do not need for it guys in the next part i'm gonna talk about how you work with email functionality so thanks for watching i'll cut i'll catch up in the next video

Channel: Great Adib

Views: 5,203

Rating: 4.9183674 out of 5

Keywords: Django course 2021 pdf create, how to create report in pdf from html in django, django learn xhtml to pdf package, how to convert dynamic html page to pdf, how to convert html to csv file in django, how to convert html page to pdf in django 2021, how to learn django properly, how to create an app in django, how django static works, django models, django querysets, django mysql, django boostrap mysql database, how to use packages in django, django http response

Id: AQrsjt4yyrw

Length: 31min 10sec (1870 seconds)

Published: Mon Mar 15 2021