js打印页面源码 ，打印选取的容器里的内容，打印指定内容
js打印页面源码 ，打印选取的容器里的内容，打印指定内容
效果
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>打印测试</title>
</head>
<body><div id="printBox"><h1>打印h1</h1><h2>打印h2</h2><h3>打印h3</h3> <ul><li>ul-li-1</li><li>ul-li-2</li><li>ul-li-3</li> </ul><ol><li>ol-li-1</li><li>ol-li-2</li><li>ol-li-3</li></ol></div><button onclick="printFun('printBox')">打印</button><script>var printFun=function(domId){console.log('打印');var u = window.open("\u6253\u5370\u7a97\u53e3", "_blank",'',true); var v=document.querySelector('#'+domId).innerHTML;u.document.write(v),u.document.close(),u.print(),u.close();}</script>
</body>
</html>代码解读
html代码解析
这里有一个容器，是用来装载需要打印的内容
<div id="printBox">按钮是为了触发打印事件
<button onclick="printFun('printBox')">打印</button>JS代码解析
Unicode码
\u6253\u5370\u7a97\u53e3
的意思的
“打印窗口”这个属于 Unicode码
为什么要这样写，是方便传参，且，浏览器会自动解析成中文
提供一个在线工具：Unicode编码转换 - 站长工具
Unicode编码转换 - 站长工具
新增一个打印窗体
这里新增一个窗体后是获取了这个窗体对象，方便后续操作这个窗体对象
var u = window.open("\u6253\u5370\u7a97\u53e3", "_blank",'',true); 方法解释
var u = window.open("名称", "是否弹出一个新的窗体",'',URL 替换浏览历史中的当前条目); 具体可参考下面文章
window.open()的用法,js打开新窗体_window.open 干净的窗体-CSDN博客
获取当前需要打印的容器内容
var v=document.querySelector('#'+domId).innerHTML;u.document.write(v)//写入内容
u.document.close()//关闭文档
u.print()//触发打印
u.close();//关闭