DEV Community

Cover image for How to create an HTML-to-PDF converter?
Flurabula
Flurabula

Posted on • Originally published at fluratech.com

How to create an HTML-to-PDF converter?

In this post, I am mainly discussing a simple JavaScript library that helps us to create PDFs from HTML. I have created an awesome-looking PDF processor using the JavaScript library.

HTML to PDF JS library

html2pdf is the library that we are discussing. This library converts HTML to PDF by converting HTML into canvas (image) with the help of html2canvas and converting the image to pdf through jsPDF another javascript library with contacts the image into pdf.

There are several libraries are available to do this function. You can also use the jsPDF library. I am using the html2pdf library to do this project. If you want a tutorial on other HDMI to PDF converter libraries, comment in the comment section.https://www.youtube.com/embed/p0DBDoT3jKY

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>HTML-to-PDF Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- html2pdf CDN link -->
    <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>
    <center>
        <h1>hello world</h1>
        <h2>HTML TO PDF TUTORIAL FLURATECH.COM</h2>
    </center>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Adipisci, voluptatibus. Itaque assumenda quia quis
        temporibus vero voluptatum velit ex, quod earum! Modi iste laboriosam blanditiis soluta nisi iusto amet
        excepturi.</p>

    <button id="download-button">Download as PDF</button>
    <script>
        const button = document.getElementById('download-button');
        function generatePDF() {
            // Choose the element that your content will be rendered to:here i am choosing BODY tag
            const element = document.querySelector('body');
            // Save the PDF for your user.
            html2pdf().from(element).save();
        }

        button.addEventListener('click', generatePDF);
    </script>
</body>

</html>

Enter fullscreen mode Exit fullscreen mode

Rich text editor using HTML CSS and JavaScript

Author box HTML CSS

Top comments (0)