原生js打印指定节点元素

最新推荐文章于 2023-07-19 10:59:02 发布

置顶 aら　淼

最新推荐文章于 2023-07-19 10:59:02 发布

阅读量1.4k

点赞数 4

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

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

版权

前端同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

html知识

6 篇文章 0 订阅

订阅专栏

很简单（可粘贴至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>

aら　淼

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
原生js打印指定节点元素

很简单：<!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 s
复制链接

扫一扫