How to Design a Web Page Using Html Pdf
Many times, we have faced the problem of saving a particular webpage or any online specific element that need to save in the form of a pdf file while using the browser. In that case, either we have used the 3rd party extension or any app or tools to generate it into a pdf file. In this article, we will learn to design the runtime generated pdf file via HTML. This task can be achieved in 3 ways:
- Print the specific webpage and save it as a PDF
- Using jsPDF library
- Using html2pdf library
Let's understand all the 3 concepts one by one with the help of examples.
Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!
1.Print the specific element and save it as a PDF:
We are going to generate a window and save this as a pdf during runtime. This is similar to the default printing features of the system. The steps are discussed below.
- Create a new window using the 'window.open' method.
- Write the innerHTML for our <div> tag, inside that window.
- Print the window
- Close the window
Example: In this example, we will use the html2pdf CDN link that will help to generate the pdf file.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< script src =
</ script >
< style >
.container {
position: fixed;
top: 20%;
left: 28%;
margin-top: -65px;
margin-left: -100px;
border-radius: 7px;
}
.card {
box-sizing: content-box;
width: 700px;
height: 150px;
padding: 30px;
border: 1px solid black;
font-style: sans-serif;
background-color: #f0f0f0;
}
#button {
background-color: #4caf50;
border-radius: 5px;
margin-left: 650px;
margin-bottom: 5px;
color: white;
}
h2 {
text-align: center;
color: #24650b;
}
</ style >
</ head >
< body >
< div class = "container" >
< button id = "button" >Generate PDF</ button >
< div class = "card" id = "makepdf" >
< h2 >Welcome to GeeksforGeeks</ h2 >
< ul >
< li >
< h4 >
We are going to generate a pdf
from the area inside the box
</ h4 >
</ li >
< li >
< h4 >
This is an example of generating
pdf from HTML during runtime
</ h4 >
</ li >
</ ul >
</ div >
</ div >
</ body >
< script >
var button = document.getElementById("button");
var makepdf = document.getElementById("makepdf");
button.addEventListener("click", function () {
var mywindow = window.open("", "PRINT",
"height=400,width=600");
mywindow.document.write(makepdf.innerHTML);
mywindow.document.close();
mywindow.focus();
mywindow.print();
mywindow.close();
return true;
});
</ script >
</ html >
Output:
2.Using jsPDF library:
In order to generate a pdf in runtime, we can use the jsPDF library. The steps are:
- Include the jsPDF CDN in the <head> tag in HTML document. The CDN is given below, search 'JsPDF CDN' at google for the latest version.
- Generate a pdf from the HTML div using 'fromHTML' method.
- Save the file using the save() method in javascript.
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< title >jsPDF Library</ title >
< script src =
</ script >
< style >
.container {
position: fixed;
top: 20%;
left: 28%;
margin-top: -65px;
margin-left: -100px;
border-radius: 7px;
}
#makepdf {
box-sizing: content-box;
width: 700px;
height: 150px;
padding: 30px;
border: 1px solid black;
font-style: sans-serif;
background-color: #f0f0f0;
}
#button {
background-color: #4caf50;
border-radius: 5px;
margin-left: 650px;
margin-bottom: 5px;
color: white;
}
h2 {
text-align: center;
color: #24650b;
}
</ style >
</ head >
< body >
< div class = "container" >
< button id = "button" >Generate PDF</ button >
< div id = "makepdf" >
< h2 >Welcome to GeeksforGeeks</ h2 >
< ul >
< li >
< h4 >
We are going to generate a pdf
from the area inside the box
</ h4 >
</ li >
< li >
< h4 >
This is an example of generating
pdf from HTML during runtime
</ h4 >
</ li >
</ ul >
</ div >
</ div >
< script >
var button = document.getElementById("button");
button.addEventListener("click", function () {
var doc = new jsPDF("p", "mm", [300, 300]);
var makePDF = document.querySelector("#makepdf");
// fromHTML Method
doc.fromHTML(makePDF);
doc.save("output.pdf");
});
</ script >
</ body >
</ html >
Output:
3.Using html2pdf library:
The steps to generate a pdf file using the html2pdf library are:
- Include the html2pdf CDN at the top of the HTML document. The CDN is given below, search 'html2pdf CDN' at google for the latest version.
- Generate pdf using html2pdf() object. This is a default object of html2pdf library.
- Save the pdf.
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< script src =
</ script >
< style >
.container {
position: fixed;
top: 20%;
left: 28%;
margin-top: -65px;
margin-left: -100px;
border-radius: 7px;
}
.card {
box-sizing: content-box;
width: 700px;
height: 150px;
padding: 30px;
border: 1px solid black;
font-style: sans-serif;
background-color: #f0f0f0;
}
#button {
background-color: #4caf50;
border-radius: 5px;
margin-left: 650px;
margin-bottom: 5px;
color: white;
}
h2 {
text-align: center;
color: #24650b;
}
</ style >
</ head >
< body >
< div class = "container" >
< button id = "button" >Generate PDF</ button >
< div class = "card" id = "makepdf" >
< h2 >Welcome to GeeksforGeeks</ h2 >
< ul >
< li >
< h4 >
We are going to generate a pdf
from the area inside the box
</ h4 >
</ li >
< li >
< h4 >
This is an example of generating
pdf from HTML during runtime
</ h4 >
</ li >
</ ul >
</ div >
</ div >
< script >
var button = document.getElementById("button");
var makepdf = document.getElementById("makepdf");
button.addEventListener("click", function () {
html2pdf().from(makepdf).save();
});
</ script >
</ body >
</ html >
Output:
How to Design a Web Page Using Html Pdf
Source: https://www.geeksforgeeks.org/how-to-design-runtime-generated-pdf-via-html/
0 Response to "How to Design a Web Page Using Html Pdf"
Enregistrer un commentaire