How to Convert HTML To PDF Using JavaScript

How to Convert HTML To PDF Using JavaScript

Converting HTML to PDF using JavaScript can be a useful feature in web applications. There are various JavaScript libraries and tools available to accomplish this task. In this tutorial, we will use a popular library called jspdf to demonstrate how to convert HTML to PDF in a web application.

How to Convert HTML To PDF Using JavaScript

To convert html to pdf using javascript with jspdf, you can follow these steps:

  • Step 1: Set Up HTML
  • Step 2: Create JavaScript Code to Convert HTML to PDF
  • Step 3: Test Your HTML to PDF Conversion

Step 1: Set Up HTML

First of all, open any text editor and create one html file and add the following code into it:

<!DOCTYPE html>
    <title>HTML to PDF using jsPDF</title>
    <!-- Include the jsPDF library -->
    <script src=""></script>
    <!-- Your HTML content to convert to PDF goes here -->
    <div id="content">
        <h1>Hello, jsPDF!</h1>
        <p>This is a sample HTML document to convert to PDF.</p>

    <!-- Button to trigger PDF generation -->
    <button id="generate-pdf">Generate PDF</button>

    <!-- Include your JavaScript code here -->
    <script src="your-script.js"></script>

You also need to include the jsPDF library in your project. You can download it from the official jsPDF GitHub repository or include it using a Content Delivery Network (CDN) in your HTML file.

Step 2: Create JavaScript Code to Convert HTML to PDF

Next, create JavaScript file (your-script.js in this example), you’ll need to create a function that captures the HTML content and converts it to a PDF when a button is clicked. Here’s an example of how to do this:

// Wait for the document to fully load before executing JavaScript
document.addEventListener("DOMContentLoaded", function () {
    // Get the button and content elements
    const generatePdfButton = document.getElementById("generate-pdf");
    const content = document.getElementById("content");

    // Add a click event listener to the button
    generatePdfButton.addEventListener("click", function () {
        // Create a new jsPDF instance
        const doc = new jsPDF();

        // Get the HTML content you want to convert to PDF
        const contentHtml = content.innerHTML;

        // Convert HTML to PDF
        doc.fromHTML(contentHtml, 15, 15);

        // Save or open the PDF file"converted-document.pdf");

Step 3: Test Your HTML to PDF Conversion

Open your HTML file in a web browser, and you should see your HTML content along with a “Generate PDF” button. Clicking the button will convert the HTML content to a PDF file and prompt you to save it.


Congratulations! You’ve successfully converted HTML to PDF using JavaScript and jsPDF. You can customize the HTML content and styling as needed for your specific use case.

Recommended Tutorials


Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *