Of saving as PDF and you can just go ahead and click on Save and it will be downloaded as a PDF and if you want to remove this date and time and this name from here you can just go over here to.
More settings this is basically of the browser so you can just go ahead and uncheck headers and Footers and it will remove those details so you'll have this PDF right here and if you go back to our.
Page here we can see that we also have this header but it is not being displayed when we click on this download as PDF button so I'm going to show you how to hide that in this print preview.
So let's save this and let's see how it looks and this is the PDF file that we just downloaded so let's get .
Index.html and let's create another file called style or css and let's create one more file called main.js and let's start with the index HTML file so you can just press exclamation and press Tab and.
You'll have this basic HTML file code and here let's link our CSS file so we can just type link and press Tab and here I'll just tap sty or css and here in the body I'll just link the.
Javascript file so here I'll just Ty SRC and main.js let's go ahead and quickly design this simple page so here I basically have a header and in that we.
Have header displayed and then I have have another division so I'll just call it container so we have a class of container and in this let's go ahead and create an IMG tag and here we will add.
An image I just get an image from pixels so pixels.com is a website where you can find free images for your website so let's search for something let's search for.
Posts Related:
- Excel Today - Setting Up Teams
- Learn How To Create This One-Click Product Catalog Creator From Any Excel Table Free Download Office
- How to build Dynamic & Interactive Dashboard in EXCEL without VBA Full Tutorial + Voice-over
Computers and let's just get this image - ID Card Make
So I'll just copy the URL of this image and let's go back and I'll just add it over here and uh now let's add H1 for the.Heading and here let's T title of the post and let's create a paragraph I just tap LM to add some random text and the next thing we need to do is we need to create this download as PDF.
Button so let's create a button for that and here I'll just tap download as PDF and let's also give it a class so I just tap class and the let's set the class to download.
BTN and now let's go ahead and add some basic styling to this so let's go to a Styler CSS file and for the body I'll just remove the default margin and let's set the font family to.
Roboto and sensitive and let's open this in our browser and let's see how it looks so I have this extension called live server installed in vs code so once you have this extension installed you.
Can just right click over here in the HTML and click on open with live server and here we can see that our design is displayed in the browser so let's go ahead and continue styling this let's.
Style the header and uh let's set a background color of light gray and let's set a padding of 40 pixels and uh let's set text align to the center and uh font size of 40 pixels and now let's style.
The container division so let's St container and uh let's set the max width to 600 pixels and let's typ margin zero Auto to bring it to the center and let's also add a padding of 100 pixels top and.
Bottom and zero for left and right right now let's go ahead and set the height and width of the image because for the text we have the correct width but for the image we have a lot more width so.
Let's go ahead and type container IMG
And let's set the width to 100% and let's set the height to 300 pixels and let's tap object fit to cover so that it has the correct proportions and this is.How our page looks let's also add some line height to this paragraph so I just Tye container p and let's set the line height to 1.8 and this looks all right now let's.
Go ahead and style this button so for the button we have a class called download BTN and uh let's set a padding of 12 pixels top and bottom 24 pixels left and right let's say the font size.
To 18 pixels and let's say the font weight to bold and let's remove the border so I just have border none let's set the background color to.
Dark gray and let's set the color of the text to White and let's also add cursor to pointer so that when we hold over this we have this pointer and with that we.
Have styled our page now let's go ahead and add the functionality to download this as a PDF so let's go back to our main.js file and we have already linked that file over here so all we have to do.
Is we have to reference this button and we have to call the print method so let's tap const download BTN equals document. query selector and here let's tap download BTN so this is the class of.
The button and let's add an event listener to this download button so let's St download BTN do add event listener and let's listen for the click event and uh when someone clicks on the.
Download button we want to print the page so let's tap print and now let's save this and let's go back and let's click on this download button and here we have this print.
Preview but it is also displaying the header right now let's see how to remove this header from the print preview so we don't want to print the header so for that you have to go back to your CSS.
File and here you have to add at media and then you have to tap print now whatever CSS we add over here will be applied to the print preview so here you can go ahead and type header and this is.
A header tag so you can just go ahead and type display of none and now if you go back to our page we can see that the header is displayed over here but if I click on download as.
PDF here we don't have the header displayed so in this way you can go ahead and change the styling of your page inside this media print so for example if you just type.
H1 and let's say the color of the H1 to red and now if you save this here we can see that the color has not changed to red but if I click on download as PDF here we can see that the color has.
Changed to red so in this way you can create a modified version of your content for printing and you can go ahead and add any number of content over here for hiding so you can add the.
Footer and the sidebar and all those things over here so that's basically how you can create this download as PDF button using HTML CSS and JavaScript all right so that's basically it for this.
Video if you have any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a.
