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>
<html>
<head>
    <title>HTML to PDF using jsPDF</title>
    <!-- Include the jsPDF library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
</head>
<body>
    <!-- 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>
    </div>

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

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

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
        doc.save("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.

Conclusion

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.

How to Convert HTML To PDF Using JavaScript