利用原声js如何做到局部打印

最新推荐文章于 2022-10-12 16:53:34 发布

原创最新推荐文章于 2022-10-12 16:53:34 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用原生JavaScript实现网页部分内容的打印功能，包括选择打印区域、避免打印不必要的元素，以及设置打印样式等关键步骤。

<!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>