Fluratech

How to create an HTML to PDF converter? HTML-to-PDF - JS library

Author- Premraj MS

From HTML to PDF JavaScript | HTML to PDF JS library | From HTML to PDF library | HTML to PDF converter JS source code | Best javascript library | 

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. 

How to create a HTML to PDF converter? HTML to PDF - JS 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.

CLICK HERE TO DOWNLOAD THE SOURCE CODE

READ MORE: Detect browser using JavaScript - with source code

From HTML to PDF JavaScript

For converting HDMI to PDF we want to download and install the html2pdf library. There are three methods available for installing the HTML2PDF library.

Link the library through javascript using a CDN link. An Internet connection is necessary for getting output in the CDN linking method. I always recommend this method to beginners.  

<script crossorigin="anonymous" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

Another method is downloading the HTML2PDF library to your system. You can download it from GitHub. After downloading use this code to link with your project. 

<script src="html2pdf.bundle.min.js"></script>

The third trick is to download the package through npm. I do not prefer these two beginners. You can choose the first or second method.  

npm install html2pdf.js

HTML to PDF converter JS source code

Simple source code: This code will result to convert the whole screen to pdf. 

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

Download source code


Create a download button with counter - javascript source code

Adverticement

Discussions

Post a Comment