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 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 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. Here a
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
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 Convert a PDF to Google Docs: 4 Methods How to Turn a PDF into a Google Doc - Quick StepsOpen Google Drive Click on Upload > Upload the PDFLocate the PDF > Perform a Right-click Select "Open With" > Google DocsGo to File Menu in Google Docs > Download as Google DocsLooking to convert a PDF into an accessible Google Doc? Conver
8 min read
How to link CSS with HTML Document? CSS is probably the most powerful style language in web development. It allows you to keep presentations of a document separate from the structure using CSS, making the maintenance and updating of a web page quite easy. CSS provides possibilities to style HTML elements, handle layouts, and create re
5 min read
How to create PDF files in Flask Whether it's generating a report, exporting data, or creating catalogs, Python and the Flask web framework provide powerful tools to accomplish this task. In this article, we'll explore how to generate both PDF files using Python and Flask. Creating PDF files in FlaskStep 1: InstallationWe are using
4 min read