溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“JavaScript怎么打印div元素的內(nèi)容”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JavaScript怎么打印div元素的內(nèi)容”吧!
本文的主要內(nèi)容則是教大家怎么使用JavaScript打印div元素的內(nèi)容！
那么要在 JavaScript 中打印 div 的內(nèi)容，我們需要整理好實現(xiàn)的思路：
首先將 div 的內(nèi)容存儲在 JavaScript 變量中；然后單擊打印按鈕，提取 HTML div 元素的內(nèi)容；然后創(chuàng)建一個 JavaScript 彈出窗口，并將提取的 HTML div 元素的內(nèi)容寫入彈出窗口；最后使用 JavaScript 窗口打印命令打印該窗口。
下面我們就通過兩種方法來實現(xiàn)：
第一種方法：本示例使用 JavaScript 窗口打印命令打印 div 元素的內(nèi)容
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<script>
function printDiv() {
var divContents = document.getElementById("GFG").innerHTML;
var a = window.open('', '', 'height=500, width=500');
a.document.write('<html>');
a.document.write('<body > <h2>Div contents are <br>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
a.print();
}
</script>
</head>
<body style="text-align:center;">
<div id="GFG" style="background-color:#00a2d4;">
<h3>億速云</h3>
<p>
這是在div中，點擊按鈕后則會顯示打印。
</p>
</div>
<input type="button" value="點擊打印" onclick="printDiv()">
</body>
</html>點擊按鈕前的效果如下：
接著我們點擊“點擊打印”按鈕，出現(xiàn)如下圖：
第二種方法：本示例使用 JavaScript 窗口打印命令打印 div 元素的內(nèi)容
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<script>
function printDiv() {
var divContents = document.getElementById("GFG").innerHTML;
var a = window.open('', '', 'height=500, width=500');
a.document.write('<html>');
a.document.write('<body > <h2>Div contents are <br>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
a.print();
}
</script>
</head>
<body>
<center>
<div id="GFG" style="background-color:#9a9afb;">
<h3>億速云</h3>
<table border="1px">
<tr>
<td>姓名</td>
<td>分數(shù)</td>
</tr>
<tr>
<td>張三</td>
<td>110</td>
</tr>
</table>
</div>
<p>
表格在div中，點擊按鈕就會打印出來。
</p>
<input type="button" value="點擊打印"
onclick="printDiv()">
</center>
</body>
</html>點擊按鈕前的效果如下：
點擊“點擊打印”按鈕后的效果，則如下所示：
到此，相信大家對“JavaScript怎么打印div元素的內(nèi)容”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼