我们可以在不使用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来添加打印行为。

更新于:2022年8月23日

691 次浏览

启动您的职业生涯

完成课程获得认证

开始
广告
© . All rights reserved.