Convert HTML and CSS to PDF with JavaScript Using HTML2PDF.js



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.

Source Code to Convert HTML to PDF


<!-- 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>

Explanation of above code

  1. The first line <!DOCTYPE html> specifies that this is an HTML5 document.
  2. The <html> element is the root element of the document and contains all the other elements.
    • The lang attribute on the <html> element specifies the language of the document as English.
  3. The <head> element contains metadata about the document, such as the character set, viewport settings, and title.
    • The <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.
    • The <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.
    • The <title> element sets the title of the document to "HTML to PDF".
    • The <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.
    • The <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.
  4. The <body> element contains the content of the document.
    • The <div> element with class name elem contains a Lorem Ipsum placeholder text with some styling applied.
    • The <button> element with class name download is a button that will be used to trigger the PDF download.
    • The JavaScript code inside the <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.

More Posts For You!


5 More HTML Tricks For You

5 HTML Tricks That You Can Use To Enhance Your Web Pages

Effortlessly Convert Excel to JSON with JavaScript: Streamline Your Data Management with Sheet Js

Integrating OCR Capabilities into Web Applications with JavaScript and AppScript

Efficient Text Extraction from PDFs: Implementing OCR with JavaScript and AppScript

Build a CRUD Application Using Google Sheets as Database with HTML, CSS, and JavaScript

Integrating OpenAI with Google Sheets using AppScript for Automated Responses

Upload Images to Google Drive and Google Sheets from HTML File Input: A Complete JavaScript and AppScript Guide

Convert HTML and CSS to PDF with JavaScript Using HTML2PDF.js

Create a Functional Contact Form Using HTML, CSS, JavaScript, and Google AppScript

Build a CRUD App Using HTML, CSS, JavaScript, and IndexedDB API

Reading Data From Google Sheets to HTML Using JavaScript and Apps Script

PrevNext