利用原声js如何做到局部打印_原生js打印指定区域-优快云博客

本文链接：https://blog.youkuaiyun.com/lx_9119/article/details/103236403

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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