<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="one">我在打印内容的上边</div>
<div id="printBox">
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</div>
<div id="two">我在打印内容的下边</div>
<button onclick="iii('printBox')">打印</button>
<script>
//如何用原声js做到页面局部打印
//打印原理就是利用 window.print() 打印,
//但是window.print打印的是body里的内容,
//如果想做到只打印局部,就要利用这个原理
//先把body里的内容存在一个副本里
//改变body里的内容,让body的内容等于你需要打印的那一部分
//打印完成之后再恢复打印之前的样子,从副本里取出来重新复制给body
//传入局部打印的id就ok
iii = (id) => {
let printBox = document.getElementById(id)
let newcontext = printBox.innerHTML
let oldcontext = document.body.innerHTML
document.body.innerHTML = newcontext
window.print()
window.location.reload()
document.body.innerHTML = oldcontext
}
</script>
</body>
</html>
利用原声js如何做到局部打印
最新推荐文章于 2022-10-12 16:53:34 发布