Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Can we make print button without JavaScript?
In this tutorial, we will learn to make a print button without writing separate JavaScript files. Most websites have print functionality that opens the browser's print dialog when clicked.
While HTML doesn't have a built-in print method, we can use the window.print() method directly in HTML attributes. This allows us to create print functionality without external JavaScript files.
Syntax
The basic syntax for invoking the print method:
window.print(); // Opens browser's print dialog
Using the onClick Event
We can call window.print() directly in HTML using the onClick event attribute.
Syntax
<button onClick="window.print()">Print Page</button>
Example
Here's a complete example with a button that triggers the print dialog:
<html>
<head>
<title>Print Button Example</title>
</head>
<body>
<h2>Make the print button without JavaScript files</h2>
<button onclick="window.print()">Print Web Page</button>
<p>Click the above button to print this page.</p>
<div>
<h3>Sample Content</h3>
<p>This content will be included in the print output.</p>
</div>
</body>
</html>
Using Anchor Tag with JavaScript Protocol
Another approach is to use the javascript: protocol in an anchor tag's href attribute.
Syntax
<a href="javascript:window.print()">Print Page</a>
Example
This example creates a clickable link that triggers the print dialog:
<html> <head> <title>Print Link Example</title> </head> <body> <h2>Print using anchor tag</h2> <a href="javascript:window.print()">?? Print This Page</a> <p>Click the above link to print this page.</p> </body> </html>
Using Image as Print Button
You can also use an image as a clickable print button:
<!DOCTYPE html>
<html>
<head>
<title>Image Print Button</title>
</head>
<body>
<h2>Print using image button</h2>
<a href="javascript:window.print()">
<img src="/computer_fundamentals/images/inkjet_printer.jpg"
height="50"
alt="Print this page"
style="cursor: pointer;">
</a>
<p>Click the printer image above to print this page.</p>
</body>
</html>
Comparison of Methods
| Method | Element Type | Accessibility | Styling Options |
|---|---|---|---|
| onClick event | Button | Good (keyboard accessible) | Full CSS styling |
| JavaScript href | Anchor link | Good (keyboard accessible) | Text/link styling |
| Image with href | Image link | Good (with alt text) | Custom images |
Browser Compatibility
The window.print() method is supported by all modern browsers and works consistently across different platforms. It opens the browser's native print dialog, giving users full control over print settings.
Conclusion
You can create print functionality without separate JavaScript files by using window.print() in HTML event attributes. The onClick event with buttons provides the best user experience and accessibility.
995 Views
