JavaScript Print to Console | Object | Div | Page | Button

What is the way JavaScript Print the content (data)? This can be confusing because in another language (Java, Python, etc) print means, print statements in console only. But in JavaScript Print can use a browser to print a page by the printer. OR Print the data in an HTML div tag. In this tutorial, we will discuss how JavaScript uses a “Print Keyword“.

JavaScript Print to Console Object Div Page Button

JavaScript Print Related:-

  • How to print to console – Hello World
  • Print page Using Button
  • A print page on load
  • Javascript print object
  • Print div

JavaScript Print to console chrome & Other browsers

Use a console.log() method to print message in the console. It is use full for developing purposes.

Visible console tab in browser press F12 button. Or you can go through Right click -> inspect element -> console

<!DOCTYPE html>
<html>
    <head>
        <script>
            console.log("Hello wrold");;
        </script>
        
        </head>
    <body>
        
        <h2>JavaScript Print in console</h2>
        
    </body>
</html>

Output: A screenshot of Safari browser, for another browser it may look different.

JavaScript Print to console chrome & Other browsers

JavaScript Print Page | Button

There is a shortcut keyboard for the javascript print page is ctrl+p. But you can also provide a Button for the print page. Where popup will show with print option.

JavaScript help to use a print function of the window object. You just need to call a window.print() prints the current web page. Let’s see the example code.

Use input tag where value=”print” attribute. Also adding a <script> tag for which will not show a confirmation popup after click the print button.

<!DOCTYPE html>
<html>
    <script>
        //adding script tag will not show confitmation popup
     </script>
    <body>
        
        <h2>JavaScript Print Button</h2>
        <input type = "button" value = "Print" onclick = "window.print()" />
    </body>
</html>

Output: See GIF image output of the safari browser.

JavaScript Print Page Button safari

On Chrome browser

JavaScript Print Page chrome

Print page on Load

You can just add line window.print() in <script> tag to JavaScript print web page on load. See below line of code.

<!DOCTYPE html>
<html>
    <script>
        window.print();
     </script>
    <body>
        
        <h2>JavaScript Print Button</h2>
    </body>
</html>

Can Javascript Print Object

Like if you a JSON or other type object and want to print the value for dubbing or another purpose. Then you can do it using -> console.dir(obj). See a complete example of it.

<!DOCTYPE html>
<html>
    <script>
        var obj = {
            "name" : "John",
            "surname" : "Doe"
        }
        console.dir(obj)
    
     </script>
    <body>
        
        <h2>JavaScript Print Object</h2>
    </body>
</html>

Output: Below screenshot of inspect element -> console (Safari Browser)

Javascript Print Object

How JavaScript Print Div Content

Some time HTML div tag need to print the content of it, or any specific tag. You can do it like this example.

<!DOCTYPE html>

    <head>
        <title></title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $("#btnPrint").live("click", function () {
                                var divContents = $("#dvContainer").html();
                                var printWindow = window.open('', '', 'height=400,width=800');
                                printWindow.document.write('<html><head><title>DIV Contents</title>');
                                printWindow.document.write('</head><body >');
                                printWindow.document.write(divContents);
                                printWindow.document.write('</body></html>');
                                printWindow.document.close();
                                printWindow.print();
                                });
            </script>
    </head>
    <body>
        <form id="form1">
            <div id="dvContainer">
                Hello i want print this line.
            </div>
            <input type="button" value="Print Div Contents" id="btnPrint" />
        </form>
    </body>
</html>

Output: Below screenshot of safari browser.

JavaScript Print Div Content

Follow this tutorial link for JavaScript Print Hello World using function Example- https://tutorial.eyehunts.com//js/javascript-hello-world-alert-function-print-example/

Do comment if you have any doubt, suggestions or questions on this topic.

Note: The JavaScript Print to Console Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Version: HECMAScript 2018


2 thoughts on “JavaScript Print to Console | Object | Div | Page | Button

  1. Hello Rohit ,

    I have created a calculator with HTML/CSS and now i want to make it functional with JS , but first i need to know how can i print in the console whenever i ciick on button of calc.

    Thank you

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.