資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究我們可以在不使用 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.tw/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 新增列印行為。
696 次瀏覽
