Convert HTML CSS to PDF with JavaScript | HTML to PDF Hello, in this video i will show you how to convert HTML, CSS to PDF using JavaScript and HTML2PDF.js library.
<!-- This is an HTML code for converting a HTML element to a PDF file using the html2pdf.js library. -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Setting character encoding and browser compatibility for the HTML file -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Setting the viewport for mobile responsiveness -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML to PDF</title>
<!-- Adding some style to the HTML element -->
<style>
.elem {
background-color: darkCyan;
color: white;
}
</style>
<!-- Adding the html2pdf.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<!-- Creating an HTML element to be converted to a PDF -->
<div class="elem">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi illo cumque ea velit, earum explicabo commodi ipsa voluptatem quidem dolores laborum eaque itaque nihil at eveniet similique fugit enim consequuntur, officia nostrum nemo! Nam voluptate corporis
error aut nobis repellendus illo pariatur accusantium non quas dolores nihil dignissimos quam quisquam natus nostrum nesciunt officia temporibus doloremque, dolor iste! Aspernatur ad ratione perspiciatis sequi consequuntur aut nulla itaque consequatur.
Aliquam fugit distinctio debitis deleniti, nisi nemo eius a, facilis dolorem tempora iusto laboriosam dicta beatae. Nisi, quisquam. Ducimus facere rerum veniam, reprehenderit labore expedita! Amet fuga, quia dicta excepturi iusto cumque.
</div>
<!-- Adding a button to trigger the PDF download event -->
<button class="download">Download PDF</button>
<!-- Adding a script to listen for the button click event and to convert the HTML element to a PDF and download it -->
<script>
let div = document.querySelector(".elem");
let btn = document.querySelector(".download");
btn.addEventListener('click', () => {
html2pdf().from(div).save()
})
</script>
</body>
</html>
<!DOCTYPE html> specifies that this is an HTML5 document.
<html> element is the root element of the document and contains all the other elements.
lang attribute on the <html> element specifies the language of the document as English.<head> element contains metadata about the document, such as the character set, viewport settings, and title.
<meta> elements within the <head> section set the character set to UTF-8 and specify that the document should be rendered in the latest version of Internet Explorer.<meta> element with name="viewport" specifies the size of the viewport to be the width of the device and the initial zoom level to be 1.0.<title> element sets the title of the document to "HTML to PDF".<style> element defines a CSS style rule for an element with class name elem. The rule sets the background color to darkCyan and the text color to white.
<script> element includes an external JavaScript library from a CDN, specifically the html2pdf.js library version 0.10.1. The integrity and crossorigin attributes provide security measures to ensure the script is being loaded from a trusted source.
<body> element contains the content of the document.
<div> element with class name elem contains a Lorem Ipsum placeholder text with some styling applied.
<button> element with class name download is a button that will be used to trigger the PDF download.
<script> element selects the div element with class name elem and the button element with class name download, then adds an event listener to the button that listens for a click event. When the button is clicked, the html2pdf() method is called and passed the div element as an argument to create a PDF from the contents of the div. The save() method is then called on the result of html2pdf() to initiate the download of the PDF file.