我们可以在不使用JavaScript的情况下创建打印按钮吗?
在本教程中,我们将学习如何在不使用JavaScript的情况下创建打印按钮。你们大多数人都见过任何网站或应用程序上的打印按钮,当用户点击打印按钮时,它会打印整个网页或任何特定文件。
但是,HTML不包含print方法。我们可以使用window对象的print()方法。window对象是全局对象,可以在代码中的任何位置访问。因此,用户可以从JavaScript或HTML代码中调用window.print()方法。
语法
用户可以按照以下语法调用JavaScript的print()方法。
<script> window.print(); // prints the whole web page </script>
使用onClick事件
在这种方法中,我们将直接使用JavaScript的onClick事件从HTML中调用window.print()方法。
语法
要将window.print()方法与HTML一起使用,用户可以按照以下语法操作。
<button onClick = "window.print()"> print web page </button>
示例
在下面的示例中,我们创建了按钮并添加了onClick事件。当用户点击按钮时,它将调用window.print()方法。
<html> <body> <h2>Make the print button without JavaScript.</h2> <button onclick = "window.print()" >Print web page</button> <p> Click the above button to print the page. </p> </body> </html>
在上面的输出中,用户可以看到,当他们点击打印网页按钮时,它会打开一个弹出窗口来打印整个网页。
在<a>标签内添加Print方法
在这种方法中,我们将window.print()方法作为<a>标签的URL添加。我们可以将任何JavaScript方法作为带有JavaScript标签的href属性值添加。
语法
用户可以按照以下语法将window.print()方法与<a>标签一起使用。
<a href = "javascript:window.print()" > Print web page </a>
示例
在下面的示例中,我们创建了打印网页的链接。我们将“javascript:window.print()”作为<a>标签的href值添加,以使其作为打印按钮工作。
<html> <body> <h2>Make the print button without JavaScript.</h2> <a href="javascript:window.print()" >Print web page</a> <p>Click above button to print the page.</p> </body> </html>
示例
在下面的程序中,我们创建一个打印按钮并向其添加图像。您可以尝试运行以下代码来制作一个图像打印按钮,即每当用户点击图像时,打印选项就会可见:
<!DOCTYPE html> <html> <body> <a href="javascript:window.print()"><img src="https://tutorialspoint.com/computer_fundamentals/images/inkjet_printer.jpg" height="50" alt="print the page"></a> <p>Click above to print the page.<p> </body> </html>
本教程教用户如何在不使用JavaScript的情况下制作打印按钮。但是,我们使用了单行JavaScript代码。由于HTML无法向网页添加行为,我们需要使用JavaScript来添加打印行为。
数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP