How to Add HTML and CSS into PDF ?
Last Updated :
18 Jan, 2024
HTML and CSS must now regularly be converted into PDF format during web development. PDFs enable the creation of printable documents, information exchange across several platforms, and preserving a webpage’s original layout. There are several ways to convert HTML and CSS to PDF files, from simple online tools to complex programming libraries.Â
These techniques may generate PDFs automatically using HTML and CSS code or manually using third-party applications. Hence, interactive, visually beautiful web pages that are straightforward to convert to PDF for sharing or archiving may be created by combining HTML and CSS. In this article, we’ll see how to add HTML and CSS to PDF.
Terminologies
- Hypertext Markup Language (HTML): A markup language called HTML is used to generate web pages.
- Cascading Style Sheets (CSS): A stylesheet language called CSS is used to specify how HTML content is presented.
- Portable Document Format (PDF): A file format called PDF is used to exhibit documents in a way that is independent of hardware, software, and operating systems.
Several methods exist for converting HTML and CSS to PDF, including:
- Internet resources: Several online resources, including HTML to PDF Converter, PDFcrowd, and others, are available for converting HTML and CSS to PDF.
- Programming libraries: To convert HTML and CSS to PDF format on the fly, developers can utilize inbuilt libraries.
- Third-party tools: To manually convert HTML and CSS to PDF, developers can utilize third-party applications like Adobe Acrobat, Microsoft Word, and Google Docs.
To add HTML and CSS to a PDF, different approaches can be used and they are as:
Using jsPDF:
On the client side PDF file creation is possible thanks to the jsPDF JavaScript library. It provides a simple approach for creating and downloading PDF files directly in the browser by combining HTML, CSS, and JavaScript. Documents like reports, invoices, tickets, etc. that need to be printed or delivered are routinely created using this library.
Syntax:
// Loading the jsPDF library
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js">
</script>
// Getting the HTML element to convert into PDF
var element = document.getElementById("element selector");
// Creating a new jsPDF object
var pdf = new jsPDF();
// Use jsPDF's 'fromHTML' method to add HTML element to PDF
pdf.fromHTML(element);
// Saving the PDF with specified file name
pdf.save("file");
Example: In this example, we will see how we will convert the HTML and CSS code into a pdf document using the jsPDF library in javascript. jsPDF offers a straightforward API to produce PDF files and has capabilities like text formatting, font embedding, and picture support. By simply clicking on the DOWNLOAD PDF button we will able to download the pdf version of the HTML and CSS document. We have initialized some text which should be there in the pdf. The syntax of using jsPdf is already defined.Â
HTML
<!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">
<script src=
</script>
</head>
<body>
<div class="GFG">
<h1 style="color: tomato;">
GeeksForGeeks
</h1>
<h2>Founded by Sandeep Jain</h2>
<p>A Computer Science portal for geeks.</p>
<p>
It contains well written, well thought
and well explained computer science
and programming articles.
</p>
</div>
<button id="btn"> PDF MAKER </button>
<script>
var button = document.getElementById("btn");
button.addEventListener("click", function () {
var doc = new jsPDF();
var pdf = document.querySelector(".GFG");
doc.fromHTML(pdf);
doc.save("GFG.pdf");
});
</script>
</body>
</html>
|
Output:
Using the html2pdf Library
It is a JavaScript library that enables the conversion of HTML content into downloadable PDF documents directly in the browser. It simplifies the process of generating PDFs by preserving the styling and structure of the HTML content.
Syntax:
// Loading the html2pdf library
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js">
</script>
// Creating a pdf
var element = document.getElementById("HTML tag selector");
html2pdf("tag");
Example: In this example, we will again see how we will convert the HTML and CSS code into a pdf document using the html2pdf library in javascript. It uses various other libraries like jsPDF, html2canvas, and others to convert the HTML and CSS document into pdf. By simply clicking on the DOWNLOAD PDF button we will able to download the pdf version of the HTML and CSS document. We have initialized some text which should be there in the pdf. The syntax of using html2pdf is already defined.Â
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
</head>
<body>
<div id="content">
<h1 style="color: tomato;">
GeeksForGeeks
</h1>
<h2>Founded by Sandeep Jain</h2>
<p>A Computer Science portal for geeks. </p>
<p>
It contains well written, well thought
and well explained computer science
and programming articles.
</p>
</div>
<button id="download-pdf">Download PDF</button>
<script>
document.getElementById('download-pdf')
.addEventListener('click', () => {
const element = document.getElementById('content');
const options = {
filename: 'GFG.pdf',
margin: 0,
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: {
unit: 'in',
format: 'letter',
orientation: 'portrait'
}
};
html2pdf().set(options).from(element).save();
});
</script>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...