JavaScript Programs Examples With Output PDF
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this article we will show you the solution of JavaScript programs examples with output PDF, using JavaScript we can use convert HTML output to a PDF and download it.
This article will use an external link of ‘html2pdf.js’ to convert any webpage to a printable PDF. And also using the .form () and .save () methods here.
Step By Step Guide On JavaScript Programs Examples With Output PDF :-
First, we are going to see an example of HTML to PDF download. Let us see the code first.
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF - 8" >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
<meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
<title> javascript programs examples with output pdf </title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : rgb(113, 221, 113) ;
text-align : center ;
}
h3 {
text-align : center ;
}
#container {
display : block ;
height : 400px ;
width : 400px ;
background-color : bisque ;
color : darkblue ;
justify-content : center ;
align-items : center ;
}
</style>
<script src = " https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js " ></script>
</head>
<body>
<div id = "container">
<h1> TALKERSCODE </h1>
<h3> javascript programs examples with output pdf </h3>
<p>
HTML to PDF file using javascript !!!!!! <br>
HTML to PDF file using javascript !!!!!! <br>
HTML to PDF file using javascript !!!!!! <br>
HTML to PDF file using javascript !!!!!! <br>
HTML to PDF file using javascript !!!!!! <br>
HTML to PDF file using javascript !!!!!! <br>
HTML to PDF file using javascript !!!!!! <br>
</p>
</div>
<button onclick = " generatePDF () "> download </button>
<script>
function generatePDF () {
const element = document.getElementById ( 'container' ) ;
html2pdf ()
.from ( element )
.save ( )
}
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- First create a <div> with the id container, within it <h1> tag used to add heading here.
- Create a <p> tag with some text.
- Creating e <button> with the text download. Into that <button> add an onclick value of a function we’re going to use later in the JavaScript file.
- Created the <style> tag to add CSS to the HTML page.
- To add JavaScript Create a <script> tag.
- Create the function we mentioned before in the button.
- Within it ,add document.getElementById() to a constant element with the Id container
- Call the html2pdf() function. Mention the .from and .save.
- By clicking the download button, the pdf can be downloaded.
Conclusion :-
At last, here in conclusion, here we can say that with this article’s help, we know JavaScript programs examples with output pdf.
I hope this article on JavaScript programs examples with output PDF helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
