How to add HTML and CSS to PDF?

2022-12-13 14:09:58 人气: 21

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 s**e that webpage as a PDF file. Creating a PDF from scratch using vanilla J**aScript makes it very difficult, and...

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 s**e that webpage as a PDF file. Creating a PDF from scratch using vanilla J**aScript makes it very difficult, and the code will be lengthy.

There are many libraries created upon J**aScript 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 J**aScript 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 h**e used the html2pdf library to convert a webpage to a pdf. We h**e 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).s**e(); }); </script> </body> </html>

In the above example, users can see using the html2pdf library of J**aScript. We h**e converted our HTML and CSS webpage into a PDF.

Using the jsPDF Library

The jsPDF is also a library created upon J**aScript 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 s**ed 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.s**e(<File name>);

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

Example

In the example, we h**e 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.s**e("file.pdf"); }); </script> </body> </html>

In the above example, users can see that using the jsPDF library of J**aScript, and we h**e converted our HTML and CSS webpage into a PDF.

In this tutorial, we h**e learned how to add HTML And CSS to PDF.

How to add HTML and CSS to PDF?

Using the html2pdf Library

Syntax

Example

Using the jsPDF Library

Syntax

Example

评论0