How to use window.print() method In Javascript

First, create a basic HTML structures with some good style and add some content in this page.
Use the event listener function, call window.print() to open the print dialog and you can choose to print or save the page as a PDF..

Example: The below example shows the implementation of the above-explained approach.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>
        Download Table as PDF
    </title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f7f7f7;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        #downloadBtn {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }

        #downloadBtn:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
    <div class="container">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Country</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John Doe</td>
                    <td>30</td>
                    <td>USA</td>
                </tr>
                <tr>
                    <td>Jane Smith</td>
                    <td>25</td>
                    <td>UK</td>
                </tr>
                <tr>
                    <td>Alice Johnson</td>
                    <td>35</td>
                    <td>Canada</td>
                </tr>
            </tbody>
        </table>

        <button id="downloadBtn">
            Download PDF
        </button>
    </div>

    <script>
        document.getElementById('downloadBtn').
            addEventListener('click', function () {
                window.print();
            });
    </script>

</body>

</html>

Output:

How to Download PDF File on Button Click using JavaScript ?

Sometimes, a web page may contain PDF files that can be downloaded by the users for further use. Allowing users to download the PDF files can be accomplished using JavaScript. The below methods can be used to accomplish this task.

Table of Content

Using html2pdf.js library
Using pdfmake Library
Using window.print() method

Tags:

#JavaScript-Questions #JavaScript #Web Technologies

Using pdfmake Library

How to use window.print() method In Javascript

How to Download PDF File on Button Click using JavaScript ?

Similar Reads

Contact Us