How to add HTML and CSS to PDF?

HTML Web Development Front End Technology

In this tutorial, we will learn how we can add HTML and CSS to PDF.

The HTML and CSS construct the webpages with styles and designs. We can save that webpage as a PDF file. Creating a PDF from scratch using vanilla JavaScript makes it very difficult, and the code will be lengthy.

There are many libraries created upon JavaScript that will helps us to execute our task. The libraries like html2pdf, jsPDF, etc. are well-known libraries that convert webpages into pdf. These libraries can be implemented in the project using the script we are adding to the program.

So, let us look at how to add HTML and CSS to PDF.

In this tutorial, we are going to create a PDF with HTML and CSS using the following ways −

Using html2pdf library
Using jsPDF library

Using the html2pdf Library

html2pdf is a JavaScript library used to convert any webpage into a pdf. We can add this library using cdnjs in the script of the HTML file. It is easy to use, and it's a complete client-side library.

Users can follow the below syntax to convert a webpage into PDF using the html2pdf library −

Syntax

//To add html2pdf into to project
<script src= "https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js"> </script>

//To create a pdf
var element = document.getElementById(<element to convert into pdf>);
html2pdf(element);

Follow the above syntax to convert the HTML and CSS webpage into a PDF.

Example

In the example, we have used the html2pdf library to convert a webpage to a pdf. We have added the heading and a paragraph on the webpage. This webpage will be converted into a pdf after clicking a button on the webpage.

<html>
<head>
   <style>
      body {
         text-align: center;
      }

      #div {
         color: red;
         background-color: green;
         align-content: center;
         text-align: center;
      }
   </style>
</head>
<body>
   <button id="btn"> Create PDF </button>
   <div id="div">
      <h2> Using <i> html2pdf library </i> to convert webpage into a pdf </h2>
      <p> This is the Demo Text! </p>
   </div>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js">
   </script>
   <script>
      var btn = document.getElementById("btn");
      var createpdf = document.getElementById("div");
      var opt = {
         margin: 1,
         filename: 'pdfcreated.pdf',
         html2canvas: {
            scale: 2
         },
         jsPDF: {
            unit: 'in',
            format: 'letter',
            orientation: 'portrait'
         }
      };
      btn.addEventListener("click", function() {
         html2pdf().set(opt).from(createpdf).save();
      });
   </script>
</body>
</html>

In the above example, users can see using the html2pdf library of JavaScript. We have converted our HTML and CSS webpage into a PDF.

Using the jsPDF Library

The jsPDF is also a library created upon JavaScript and can convert the webpage into a pdf file. We can import it the same as the html2pdf. We must include the CDN in the script at the head or the end of the body in HTML. It can convert into a pdf in just one statement and can be saved easily on the device.

All the users can follow the syntax to convert a webpage into PDF using the jsPDF library −

Syntax

//To integrate jsPDF library
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
var element = document.getElementById(<element to convert into pdf>);
var pdf = new jsPDF();
pdf.fromHTML(element);
pdf.save(<File name>);

Follow the above syntax to use the jsPDF library to convert the webpage into HTML.

Example

In the example, we have used the jsPDF library to convert the webpage into a pdf. The jsPDF library has been inserted using the cdnjs link in the script tag. After clicking a button, the pdf will be created with the same content displayed on the webpage.

<html>
<body>
   <button id="btn"> Create PDF </button>
   <div id="container">
      <h2> Using <i> jsPDF library </i> to convert webpage into a pdf </h2>
      <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, explicabo ullam asperiores esse quod nihil! </p>
   </div>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js">
   </script>
   <script>
      var button = document.getElementById("btn");
      button.addEventListener("click", function() {
         var doc = new jsPDF();
         var pdf = document.querySelector("#container");
         doc.fromHTML(pdf);
         doc.save("file.pdf");
      });
   </script>
</body>
</html>

In the above example, users can see that using the jsPDF library of JavaScript, and we have converted our HTML and CSS webpage into a PDF.

In this tutorial, we have learned how to add HTML And CSS to PDF.