How to add HTML and CSS into PDF File ?
Last Updated :
24 Jul, 2024
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 html2pdf and jsPDF are well-known for converting webpages into PDF files.
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.
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>
// Creating a new jsPDF object
let pdf = new jsPDF();
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.
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>
let button = document.getElementById("btn");
button.addEventListener("click", function () {
let doc = new jsPDF();
let pdf = document.querySelector(".GFG");
doc.fromHTML(pdf);
doc.save("GFG.pdf");
});
</script>
</body>
</html>
Output:
Using the html2pdf Library
html2pdf is a JavaScript library that facilitates converting HTML content, including CSS styles, into downloadable PDF files, providing a straightforward way to generate PDFs directly from web pages. It simplifies the process of creating PDFs from web pages without the need for server-side processing.
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
let 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.
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 ? 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 on
4 min read
How to Link a CSS to HTML? To apply custom styles to your HTML webpage, it's best practice to keep your CSS code in a separate file. In fact, over 90% of modern websites follow this approach for better organization and maintainability. Simply create a CSS file (e.g., styles.css) and write your styling rules in it. Then, use t
4 min read
How To Save Text As a File in HTML CSS and JavaScript? In this tutorial, we will learn how to save user input as a text file using HTML, CSS, and JavaScript. This can be particularly useful for web applications where users need to download their input or notes as a file.Project PreviewWe will build a simple web page that allows users to enter text in a
2 min read
How to Open a Pdf in Google Docs PDFs are widely used for sharing and presenting information. However, there are times when you may need to edit a PDF, and this is where Google Docs comes into play. Google Docs, a free web-based word processor offered by Google, allows users to not only create and edit documents but also convert an
7 min read
How to Embed PDF file using HTML ? We will learn how to embed PDF files in HTML documents and explore their implementation through examples. Sometimes, you may want to insert a PDF file into an HTML document to make the content more interactive. Since HTML and PDF formats are different, embedding PDFs can be a bit challenging.Method
3 min read
How To Insert a PDF into a Google Docs: 4 Easy ways Upload a PDF to Google Docs without losing formatting - Quick Steps Save the PDF to your computer.Log into your Google account.Upload the PDF file.Select the Uploaded FileSelect Open with > Google DocsInserting a PDF into Google Docs is a useful way to enhance your documents by incorporating addi
7 min read