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 Link a CSS 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 specifies
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 loo
4 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 Background Image in HTML?
Adding a background image to HTML page can enhance the visual appeal and provide a more immersive experience for your website visitors. The <body> background attribute is used to add background image in HTML, but this attribute is depreciated in HTML5 and not in use. In place of background att
3 min read
How to Add Symbols in HTML?
Symbols in HTML are important for conveying special characters, such as copyright, currency symbols, and arrows, which enhance content clarity and visual appeal. We will explore two different approaches to adding symbols in HTML.Below are the possible approaches: Table of ContentAdd Symbols using HT
2 min read
How to Create a Website Using HTML and CSS?
Creating a website using HTML and CSS is a foundational skill if you are learning web development. HTML (HyperText Markup Language) is used to structure content, while CSS (Cascading Style Sheets) is used for styling, including colors, fonts, margins, and positioning. In this article, we’ll go throu
5 min read
How to convert IPython notebooks to PDF and HTML?
In this article, we will see how to convert IPython notebooks to PDF and HTML. Sometimes according to our necessity, we would want to share or convert the Jupyter notebook to HTML or pdf format. Our Jupyter Notebooks can be easily converted to PDF and HTML files. You may access your notebook as a PD
1 min read
How to add horizontal line in HTML ?
Creating a visually appealing and well-structured webpage often involves the use of horizontal lines. These lines help separate different sections of content, making it easier for users to read and understand the information presented. In this guide, we’ll explore two effective methods to add horizo
2 min read
How To Add Font In CSS?
Adding fonts to a website enhances its design and readability. In CSS, custom fonts can be applied using several techniques that allow web designers to include specific fonts that aren’t system defaults.PrerequisitesHTMLCSSThese are the approaches to add a font in CSS: Table of ContentUsing web-safe
2 min read