JavaScript頁面打印預覽是在瀏覽器中打印頁面前為用戶提供的一個預覽接口，可以讓用戶在提交打印任務前查看并調整頁面樣式。隨著互聯網應用的不斷發展，JavaScript頁面打印預覽已經成為一個重要的功能需求。
下面以一個實際案例來說明如何實現JavaScript頁面打印預覽功能。假設我們有一個學生成績表格，我們需要實現在點擊頁面上的“打印”按鈕后，彈出一個預覽窗口，用戶可以在此窗口中預覽并調整打印的頁面樣式。代碼如下：
function preview() {
// 創建一個div元素，用于將頁面元素復制到其中
var printDiv = document.createElement("div");
printDiv.innerHTML = document.getElementById("scoreTable").innerHTML;
// 將div元素添加到當前頁面
document.body.appendChild(printDiv);
// 打開新窗口進行預覽
var printWindow = window.open('', '', 'width=800,height=600');
printWindow.document.write("<html><head><title>成績單預覽</title></head><body>" + printDiv.innerHTML + "</body></html>");
// 關閉彈出的div元素
document.body.removeChild(printDiv);
}在上面的代碼中，我們首先創建了一個div元素，將需要打印的頁面元素復制到其中，并將該div元素添加到當前頁面中。然后我們打開一個新的窗口，將該div元素中的HTML代碼寫入該窗口中，并進行頁面預覽。最后，我們刪除在頁面中添加的div元素。
除了使用JavaScript實現頁面打印預覽，我們還可以使用第三方庫，如Print.js（https://printjs.crabbly.com/）來實現該功能。Print.js是一個輕量級的庫，可以幫助我們在頁面上添加打印按鈕，實現一鍵打印和打印預覽功能。使用Print.js，我們可以輕松地在頁面中添加打印按鈕，并通過各種選項來自定義打印預覽窗口，如窗口大小、頁面方向、頁眉頁腳等。示例代碼如下：
// 配置打印預覽選項
var options = {
previewMode: true,
width: 800,
header: "<h1>成績單預覽</h1>"
};
// 添加打印按鈕
document.querySelector("button").addEventListener("click", function () {
// 打印頁面
window.printJS({
printable: "scoreTable",
type: "html",
header: options.header,
width: options.width,
previewMode: options.previewMode
});
});在上面的代碼中，我們配置了打印預覽選項，如預覽模式、窗口寬度和頁眉標題。然后我們添加了一個按鈕，并在點擊后執行打印操作。通過指定printable選項，我們指定了需要打印的頁面元素，將type選項設置為html，則Print.js將使用HTML格式打印該元素。通過header選項，我們為打印預覽窗口添加了一個標題，通過width選項，我們設置了打印預覽窗口的寬度。
綜上所述，JavaScript頁面打印預覽是一個非常實用的功能需求，可以幫助我們提升用戶體驗，讓用戶更好地控制頁面打印樣式。通過上述方法，我們可以輕松實現頁面打印預覽功能，并根據實際需要進行自定義配置。