Print the content of a div element using JavaScript

Last Updated : 10 Jan, 2025

If you want to print the content of a <div> element using JavaScript, you can achieve this by extracting the content and then opening a new window or popup to display and print it. This method involves capturing the content of the <div>, creating a new window, and using the print command to print the content.

Example 1: This example uses JavaScript window print command to print the content of div element.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print Div Content</title>
</head>
<body style="text-align:center;">
    <div id="GFG" style="background-color: green; padding: 20px;">
        <h2>GeeksforGeeks</h2>
        <p>This content inside the div will be printed when you click the button.</p>
    </div>
    <input type="button" value="Print Div" onclick="printDiv()">
<script>
        function printDiv() {
            let divContents = document.getElementById("GFG").innerHTML;
            let printWindow = window.open('', '', 'height=500, width=500');
            printWindow.document.open();
            printWindow.document.write(`
                <html>
                <head>
                    <title>Print Div Content</title>
                    <style>
                        body { font-family: Arial, sans-serif; }
                        h1 { color: #333; }
                    </style>
                </head>
                <body>
                    <h1>Div Contents:</h1>
                    ${divContents}
                </body>
                </html>
            `);
            printWindow.document.close();
            printWindow.print();
        }
    </script>
</body>
</html>

Output:

Example 2: This example uses the JavaScript window print command to print the content of div element.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print Div Content with Table</title>
</head>
<body>
    <div id="GFG" style="background-color: green; padding: 20px;">
        <h2>GeeksforGeeks</h2>
        <table>
            <tr>
                <th>Item</th>
                <th>Description</th>
            </tr>
            <tr>
                <td>Computer</td>
                <td>Algorithm</td>
            </tr>
            <tr>
                <td>Microwave</td>
                <td>Infrared</td>
            </tr>
        </table>
    </div>
    <p>The table inside the div will be printed on button click.</p>
    <input type="button" value="Print Div" onclick="printDiv()">
    <script>
        function printDiv() {
            let divContents = document.getElementById("GFG").innerHTML;
            let printWindow = window.open('', '', 'height=500, width=500');
            printWindow.document.open();
            printWindow.document.write(`
                <html>
                <head>
                    <title>Print Div Content</title>
                    <style>
                        body { font-family: Arial, sans-serif; }
                        table { width: 100%; border-collapse: collapse; }
                        th, td { border: 1px solid #ddd; padding: 8px; }
                        th { background-color: #f4f4f4; }
                    </style>
                </head>
                <body>
                    <h1>Div Contents:</h1>
                    ${divContents}
                </body>
                </html>
            `);
            printWindow.document.close();
            printWindow.print();
        }
    </script>
</body>
</html>

Output:

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.

How to get the child element of a parent using JavaScript ?

AdeshSingh1

Improve

Article Tags :

Print the content of a div element using JavaScript

Similar Reads

Thank You!

What kind of Experience do you want to share?