How to Add HTML and CSS into PDF ?
Last Updated :
26 Jul, 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=
"https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js">
</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=
"https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js">
</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:
Similar Reads
How to add HTML and CSS into PDF File ?
HTML and CSS are regularly 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. Several JavaScript libraries can help us to complete our tasks. Libraries like html
3 min read
How to Add Tailwind CSS to HTML ?
Tailwind CSS is a utility-first framework offering pre-defined classes for rapid styling of HTML elements. It simplifies customization and accelerates web development workflows. Integration Options: CDN Integration: Quickly add Tailwind CSS via a CDN link in the <head> of your HTML.Using npm:
3 min read
How to Add Video in HTML?
To add a video in HTML, you use the <video> tag, which allows you to embed videos directly into your webpage for users to view without needing external players. The <video> tag supports multiple formats like MP4, WebM, and Ogg.You can include attributes such as controls, autoplay, and lo
4 min read
How to Link a CSS File to HTML?
To link a CSS file to an HTML file, Create a separate CSS file (styles.css) and write styles on it. Now we need to use the <link> element inside the <head> section of the HTML file to attach the CSS file. Syntax:<link rel="stylesheet" href="styles.css">rel="stylesheet": It specifie
3 min read
How to Add GIF in HTML?
GIFs (Graphics Interchange Format) are the popular image format that supports both animated and static images. Adding the GIFs to the HTML document enhances the visual appeal and the user interaction of the web pages. They are commonly used for loading animations, fun illustrations, or visual explan
3 min read
How to Add Image in CSS?
Images are an essential part of web design, bringing the visual appeal and providing the context to content. In web development, images can be added to the websites using HTML and styled or manipulated using CSS. CSS can offer various ways to incorporate images into web pages, allowing the developer
3 min read
How to Add Icons in HTML?
Icons in HTML are small images that show actions or items on a website, like a "home" button or a "search" symbol. They help people find things easily. To add icons in HTML, you can use an icon library like Font Awesome, Bootstrap Icons, Google Icons, and Image Icons. 1. Using Font Awesome IconsFont
2 min read
How to Add Footer in HTML?
A footer in HTML is a section of the webpage that typically contains information about the website or the author, such as copyright details, contact information, and links to the other important pages. It can usually be placed at the bottom of the webpage and is a crucial part of the web design for
4 min read
How to write address in an HTML document ?
The <address> tag in HTML is used to write contact information of a person or an organization. If <address> tag is used inside the <body> tag then it represents the contact information of the document and if the <address> tag is used inside the <article> tag, then it re
1 min read
How to Create a Box with HTML and CSS?
A box is a basic building block in web design, used to contain text, images, or other content. Understanding how to create and style a box is crucial for building responsive and visually appealing web pages. These are the below approaches to creating a box in HTML and CSS: Table of Content Using Bas
2 min read