Generate PDF of HTML Element in Browser

Hello everyone👋

In this article, we are going to see how we can generate a PDF of any HTML element in the browser i.e, entirely client-side.

We will use the package html2pdf to generate the PDF.

html2pdf is using html2canvas to convert the HTML element to canvas and then into an image. Then it generates the PDF of the image with the help of jsPDF.

If you want to know more about html2canvas, check out this article.

Implementation

Let us see a small implementation of the package html2pdf.

index.html

A basic HTML page, where the package's bundle link is included.

Created a div block of simple content and a export PDF button. We will be generating a PDF of the div whose id is view on clicking the export PDF button.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML2PDF</title>
    <script src="https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js" defer></script>
    <script src="./script.js" defer></script>
</head>

<body onload="main()" align="center">
    <div id="view" align="center">
        <h1>Export PDF</h1>
        <h3>Using HTML2PDF</h3>
    </div>
    <button id="export-pdf">Export PDF</button>
</body>

</html>

script.js

JavaScript file containing the main method which will be invoked once the site loads and listening for the onclick event on the export PDF button.

On clicking the export PDF button, the html2pdf method will be called which takes the reference to the element (div) as its argument.

function main() {
    var view = document.getElementById("view");
    var exportPDF = document.getElementById("export-pdf");
    exportPDF.onclick = (e) => html2pdf(view);
}