在 Web 開發過程中,我們有時需要將當前網頁的內容進行打印。雖然現在大多數瀏覽器都自帶打印功能,但使用 JavaScript 實現自定義打印功能也是很有必要的。
下面我們來看一下如何使用 JavaScript 實現簡單的打印功能。我們假設當前頁面上有一張圖片需要打印:
<img src="https://example.com/image.png" id="my-image">
我們可以使用以下代碼實現點擊按鈕時打印當前頁面并包括我們需要的圖片:
function printPage() {
const image = document.querySelector("#my-image");
const myWindow = window.open("", "", "width=200, height=100");
myWindow.document.write("<img src='" + image.src + "'>");
myWindow.print();
myWindow.close();
}
<button onclick="printPage()">打印頁面</button>
以上代碼中,我們首先獲取了圖片元素,并將其引用存儲在變量 image 中。接著,我們創建了一個新的瀏覽器窗口,并使用document.write()方法將圖片插入該窗口中。最后,我們使用該窗口的print()方法打印網頁,并使用close()方法關閉窗口。
當然,除了打印圖片,我們還可以使用 JavaScript 打印當前頁面的所有內容。以下代碼可以實現在頁面右上角添加一個按鈕,點擊該按鈕即可調用瀏覽器自帶的打印功能:
function addPrintButton() {
const printButton = document.createElement("button");
printButton.innerHTML = "打印頁面";
printButton.onclick = function() {
window.print();
};
document.body.appendChild(printButton);
}
addPrintButton();
通過以上代碼,我們首先創建了一個新的按鈕,并設置了其點擊事件。該事件觸發時,我們調用了window.print()方法實現瀏覽器自帶打印功能。最后,我們將該按鈕添加到頁面的body元素中。
以上就是 JavaScript 實現自定義打印功能的例子。當然,實際中我們還可以根據需求做出更加復雜的打印功能,例如自定義打印樣式、實現跨頁面打印等。
上一篇nav()oracle