打印預覽是在JavaScript中非常常見的一個需求，因為很多時候在打印前需要用戶確認打印內容是否正確，這時候打印預覽就能為用戶提供很好的體驗。下面我們來了解一下如何是用JavaScript實現打印預覽。
先來看一個簡單的例子，我們有一個頁面上有一個按鈕，點擊按鈕后彈出一個新的窗口，這個新窗口里面顯示我們要打印的內容，讓用戶確認后再進行打印。
在這個例子中，我們通過window.open打開了一個新的窗口，并通過preview.document.write將要打印的內容寫入到這個新窗口中。這個例子非常簡單，但也能夠讓我們對打印預覽有一個初步的了解。
接下來我們來看一下更加復雜的例子。我們假設我們要打印的內容是一個表格，這個表格中有一些行是需要打印的，有一些行是不需要打印的。這時候我們需要將需要打印的行顯示在打印預覽窗口中，不需要打印的行則不顯示。下面是一個可行的解決方案。
在這個例子中，我們將需要打印的元素的CSS設置為@media print，這樣在打印預覽時這些元素才會顯示。對于不需要打印的元素，我們通過給這些元素添加no-print類來實現不顯示。
綜上所述，打印預覽是JavaScript中非常常見的一個需求，我們可以通過window.open在新窗口中顯示要打印的內容，并通過CSS控制哪些內容需要打印，哪些內容不需要打印。當然，在實際的項目中還有很多細節需要注意，但總的來說，通過一定的代碼實現，我們可以為用戶提供更好的打印預覽體驗。
先來看一個簡單的例子，我們有一個頁面上有一個按鈕，點擊按鈕后彈出一個新的窗口，這個新窗口里面顯示我們要打印的內容，讓用戶確認后再進行打印。
html
<button onclick="openPreview();">打印預覽</button>
<script>
function openPreview() {
var preview = window.open();
preview.document.write('<html><head><title>打印預覽</title></head><body><h1>這是要打印的內容</h1></body></html>');
}
</script>在這個例子中，我們通過window.open打開了一個新的窗口，并通過preview.document.write將要打印的內容寫入到這個新窗口中。這個例子非常簡單，但也能夠讓我們對打印預覽有一個初步的了解。
接下來我們來看一下更加復雜的例子。我們假設我們要打印的內容是一個表格，這個表格中有一些行是需要打印的，有一些行是不需要打印的。這時候我們需要將需要打印的行顯示在打印預覽窗口中，不需要打印的行則不顯示。下面是一個可行的解決方案。
html
<button onclick="openPreview();">打印預覽</button>
<table id="printTable">
<thead>
<tr>
<th>名字</th>
<th>年齡</th>
<th>是否打印</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>20</td>
<td>true</td>
</tr>
<tr>
<td>小紅</td>
<td>18</td>
<td>false</td>
</tr>
<tr>
<td>小剛</td>
<td>22</td>
<td>true</td>
</tr>
</tbody>
</table>
<script>
function openPreview() {
var preview = window.open();
var printTable = document.getElementById('printTable');
var html =; preview.document.write(html); var rows = printTable.getElementsByTagName('tr'); for (var i = 0; i < rows.length; i++) { if (!/true/.test(rows[i].lastElementChild.innerHTML)) { rows[i].classList.add('no-print'); } } } </script>
<html>
<head>
<title>打印預覽</title>
<style>
@media print {
tr:not(.print) {display:none;}
}
</style>
</head>
<body>
${printTable.outerHTML}
</body>
</html>
在這個例子中，我們將需要打印的元素的CSS設置為@media print，這樣在打印預覽時這些元素才會顯示。對于不需要打印的元素，我們通過給這些元素添加no-print類來實現不顯示。
綜上所述，打印預覽是JavaScript中非常常見的一個需求，我們可以通過window.open在新窗口中顯示要打印的內容，并通過CSS控制哪些內容需要打印，哪些內容不需要打印。當然，在實際的項目中還有很多細節需要注意，但總的來說，通過一定的代碼實現，我們可以為用戶提供更好的打印預覽體驗。