我们可以在不使用 JavaScript 的情况下创建打印按钮吗？

在本教程中，我们将学习如何在不使用 JavaScript 的情况下创建打印按钮。你们中的大多数人在任何网站或应用程序上都见过打印按钮，当用户点击打印按钮时，它会打印整个网页或任何特定文件。

但是，HTML 不包含打印方法。我们可以使用窗口对象的 print() 方法。窗口对象是全局对象，可以在代码中的任何位置访问。因此，用户可以从 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> 标签内添加打印方法

在这种方法中，我们将 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-08-23

696 次浏览

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告