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 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 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.
On Chrome browser
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)
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="http://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.
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
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
Hi,
you can do it with giving a function to button.