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 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 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
How to Link External CSS to HTML? External CSS is a method used to style multiple HTML pages with a single stylesheet. This approach involves creating a separate CSS file with a .css extension that contains style properties applied to various selectors (such as classes, IDs, headings, etc.). By using external CSS, you can maintain a
3 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 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 Add CSS Adding CSS (Cascading Style Sheets) to your HTML is essential for creating visually appealing and user-friendly web pages. In this guide, we will explore the three primary methods to link CSS to HTML documents: inline, internal, and external CSS. Each method has its advantages and best-use scenarios
3 min read