詳解怎麼使用JavaScript列印div元素的內容
- 藏色散人原創
- 2021-08-18 10:26:424643瀏覽
在上一篇《教大家在JavaScript中以不同的方式宣告變數》中為大家介紹了怎麼在JavaScript中以不同的方式聲明變量，有興趣的朋友可以了解學習一下~
本文的主要內容是教大家怎麼使用JavaScript列印div元素的內容！
那麼要在JavaScript 中列印div 的內容，我們需要整理好實作的想法：
先將div 的內容儲存在JavaScript 變數中；然後按一下列印按鈕，提取HTML div元素的內容；然後建立一個JavaScript 彈出窗口，並將提取的HTML div 元素的內容寫入彈出視窗；最後使用JavaScript 視窗列印命令列印該視窗。
下面我們就透過兩種方法來實現：
第一種方法：本範例使用JavaScript 視窗列印指令列印div 元素的內容
<!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 > <h1>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;">
<h2>PHP中文网</h2>
<p>
这是在div中，点击按钮后则会显示打印。
</p>
</div>
<input type="button" value="点击打印" onclick="printDiv()">
</body>
</html>點選按鈕前的效果如下：
接著我們點選「點選列印」按鈕，出現如下圖：
第二種方法：本範例使用JavaScript 視窗列印指令列印div 元素的內容
<!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 > <h1>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;">
<h2>PHP中文网</h2>
<table border="1px">
<tr>
<td>姓名</td>
<td>分数</td>
</tr>
<tr>
<td>张三</td>
<td>110</td>
</tr>
</table>
</div>
<p>
表格在div中，点击按钮就会打印出来。
</p>
<input type="button" value="点击打印"
onclick="printDiv()">
</center>
</body>
</html>點擊按鈕前的效果如下：
點選「點選列印」按鈕後的效果，如下圖：
#最後推薦給大家推薦《##JavaScript基礎教學》~歡迎大家學習~
以上是詳解怎麼使用JavaScript列印div元素的內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn