原生js打印指定节点元素

最新推荐文章于 2024-07-11 08:47:19 发布

置顶 aら　淼

最新推荐文章于 2024-07-11 08:47:19 发布

阅读量1.5k

点赞数 4

分类专栏： html知识前端文章标签： js html 云打印

本文链接：https://blog.csdn.net/GeniusXYT/article/details/109274569

版权

前端同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

html知识

6 篇文章 0 订阅

订阅专栏

本文介绍了一种使用JavaScript实现网页局部内容打印的方法。通过创建一个新的窗口并加载需要打印的内容，可以确保仅打印所需的页面部分，同时保留必要的样式设置。此方法适用于需要精确控制打印输出的应用场景。

摘要由CSDN通过智能技术生成

很简单（可粘贴至txt文档后改后缀为html打开看效果）：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>打印</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div>
    <span style="color:red">这里不打印 ！！！</span>
</div>

<div id="printDiv">
    <span style="color:green">打印这里！！</span>
</div>
<button onclick="print()">打印</button>

<script>
    function print(){
        // 设置要打印内容的 id: printDiv
        const WindowPrt = window.open('', '打印', 'width=' + (screen.availWidth - 10) + ',height=' + (screen.availHeight - 50) + ',left=0,top=0,location=0,menubar=0,toolbar=0,scrollbars=0,status=0'); // 裸全屏
        WindowPrt.document.head.innerHTML = window.document.head.innerHTML // 加入当前所有头 - 以防样式丢失
        WindowPrt.document.body.innerHTML = document.getElementById('printDiv').innerHTML; // 载入指定body
        WindowPrt.print() // 调用打印
        WindowPrt.close() // 自动等待print结束后执行
    }
</script>

</body>
</html>

将此方法放在主页，传入参数，实现公用（用原生onclick()事件调用）：

<script>
    // 打印
    var rootPrint = function (elId) {
      // 设置要打印内容的 id: elId
      const WindowPrt = window.open('', '打印', 'width=' + (screen.availWidth - 10) + ',height=' + (screen.availHeight - 50) + ',left=0,top=0,location=0,menubar=0,toolbar=0,scrollbars=0,status=0'); // 裸全屏
      WindowPrt.document.head.innerHTML = window.document.head.innerHTML // 加入当前所有头 - 以防样式丢失
      WindowPrt.document.body.innerHTML = document.getElementById(elId).innerHTML; // 载入指定body
      WindowPrt.print() // 调用打印
      WindowPrt.close() // 自动等待print结束后执行
    }
  </script>