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();//关闭

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/809961.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2011年认证杯SPSSPRO杯数学建模A题(第二阶段)客机水面迫降时的姿态全过程文档及程序

2011年认证杯SPSSPRO杯数学建模 A题 客机水面迫降时的姿态 原题再现&#xff1a; 2009 年 1 月 15 日下午&#xff08;美国东部时间&#xff09;&#xff0c;US Airways 所属第 1549 航班&#xff08;空中客车 A320 客机&#xff09;在起飞后不久在纽约哈德逊河紧急迫降。经及…

动态代理 --java学习笔记

什么是动态代理&#xff1f; 当一个类的很多方法都存在重复冗杂的部分&#xff0c;就可以使用代理来处理那些重复部分的任务&#xff0c;到了各自的实现部分再丢回给原方法处理&#xff0c;同时也可以提高方法的扩展性&#xff0c;而动态则是指在运行时动态地创建代理对象&…

Acrobat Pro DC 2023 for mac直装激活版 pdf编辑处理工具

Acrobat Pro DC 2023 for Mac是一款功能强大的PDF编辑器&#xff0c;为用户提供了全面且高效的PDF处理体验。 软件下载&#xff1a;Acrobat Pro DC 2023 for mac直装激活版下载 首先&#xff0c;它支持用户从现有文档创建PDF&#xff0c;或者将其他文件格式如图片、网页等轻松转…

个人博客项目笔记_05

1. ThreadLocal内存泄漏 ThreadLocal 内存泄漏是指由于没有及时清理 ThreadLocal 实例所存储的数据&#xff0c;导致这些数据在线程池或长时间运行的应用中累积过多&#xff0c;最终导致内存占用过高的情况。 内存泄漏通常发生在以下情况下&#xff1a; 线程池场景下的 ThreadL…

牛客 NC252 多数组中位数【中等 模拟 Java,Go】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/b6bb0bce88894108bfc23e9b7b012420 思路 模拟&#xff0c;2数组合并一个数组helphelp长度为奇数&#xff0c;直接取中间值&#xff0c;为偶数&#xff0c;中间2个值&#xff0c;哪个小返回哪个参考答案Java imp…

结合ArcGIS+SWAT模型+Century模型:流域生态系统水-碳-氮耦合过程模拟

原文链接&#xff1a;结合ArcGISSWAT模型Century模型&#xff1a;流域生态系统水-碳-氮耦合过程模拟https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&tempkeyMTI2NV9sMGRZNUJoVkNVc1ZzSzRuMl9XXzhqX0R3cXpESWFwM1E4cFY4ejNqWFh3VUl0dlZkNWk4b20ydFdFTy1xS2ZObGN0Z0ZXSjly…

【学习路径】AI入门路线分享

近期整理飞书文档&#xff0c;一些权限被关掉了。看好多人在申请访问这个飞书文档&#xff0c;于是把它单独拿出来放在CSDN上&#xff0c;供大家参考~ 原视频地址&#xff1a;AI&#xff1a;从小白到入门&#xff0c;超详细人工智能成长路径分享_哔哩哔哩_bilibili 文章目录 1.…

OpenStack (T)部署trove

环境&#xff1a;Openstack&#xff08;T&#xff09; CentOS Linux release 7.9.2009 (Core) 正文&#xff1a; 1.控制节点安装trove软件包 # yum install openstack-trove-guestagent openstack-trove python-troveclient openstack-trove-ui –y2.创建数据库&#xff0c…

C++11 设计模式3. 工厂方法模式

简单工厂模式的遗留问题 //从上面的代码可以看到&#xff0c;简单工厂模式确实实现了new 出来具体对象&#xff0c; 和 业务逻辑的分离&#xff0c; //但是不符合 "开闭原则" //"开闭原则"说的是代码扩展性问题——对扩展开放&#xff0c;对修改关…

如何在OceanBase v4.2 中快速生成随机数据

在使用传统数据库如 MySQL 和 Oracle 时&#xff0c;由于缺乏多样化的随机数据生成方案&#xff0c;或者实现成本过高&#xff0c;构造随机数据的开发成本受到了影响。OceanBase在老版本中虽然有相应的解决方案&#xff0c;但语法复杂和性能较差等问题仍然存在。 现在&#xf…

【漏洞复现】润乾报表平台 InputServlet接口处存在任意文件上传漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

车内AR互动娱乐解决方案,打造沉浸式智能座舱体验

美摄科技凭借其卓越的创新能力&#xff0c;为企业带来了革命性的车内AR互动娱乐解决方案。该方案凭借自研的AI检测和渲染引擎&#xff0c;打造出逼真的数字形象&#xff0c;不仅丰富了车机娱乐内容&#xff0c;更提升了乘客与车辆的互动体验&#xff0c;让每一次出行都成为一场…

C语言 循环控制——while和do-while语句

目录 whiel语句 do-while语句 while与do-while的区别 计数控制的循环 ​编辑标记控制的循环 whiel语句 do-while语句 while与do-while的区别 计数控制的循环 标记控制的循环

怎么构建临床知识图谱?

怎么构建临床知识图谱? 构建临床知识图谱传统临床指南的局限性决策的不确定性和个体差异构建真实临床知识图谱构建真实世界的临床事件图谱基于书本抽取的知识来自哪些书本&#xff1f;如何保证这些知识是最新的知识&#xff1f;如何不断融入最新的医学研究进展&#xff0c;从而…

挖掘未来:私有LTE/5G网络驱动智慧矿山的自动化

私有LTE/5G网络为世界上一些最偏远的角落提供无线连接。如果没有无线通信网络&#xff0c;各行业就无法满足增加产量、降低运营成本和减少环境破坏的需求。 在本案例研究中&#xff0c;我们着眼于自动化如何改变无线网络的动态。智慧矿山要求运营商无缝集成多个系统和应用程序…

探索Web3的奇迹:数字时代的新前景

在数字化时代的潮流中&#xff0c;我们不可避免地迎来了一个全新的篇章——Web3时代的到来。在这个时代中&#xff0c;区块链技术作为数字化世界的核心&#xff0c;正在重塑着我们的生活方式、经济模式以及社会结构。在Web3时代&#xff0c;我们将目睹着一个以去中心化、透明化…

32.WEB渗透测试-数据传输与加解密(6)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;31.WEB渗透测试-数据传输与加解密&#xff08;5&#xff09; 关于discuz3.5的源码内容和…

小型社区与园区如何选购合适的停车场道闸系统?需注意什么

小型社区和园区停车场通常面临着空间有限、预算有限以及车流量相对较小的挑战。这些特点要求停车场的管理系统既要经济实用&#xff0c;又要能够满足基本的车辆管理需求&#xff0c;如安全性、通行效率和便捷性。针对这些特点&#xff0c;选择合适的停车道闸系统成为提高管理效…

天诚物联网锁亮相福州南京沈阳西安展会,与您见证AIoT行业发展

目光灼灼&#xff0c;步履不辍。自4月1日第七届CCLE中国教育后勤展览会一别&#xff0c;全场景AIoT解决方案服务商——江苏新巢天诚智能技术有限公司&#xff08;以下简称“天诚”&#xff09;打造的校园物联网锁软硬一体化解决方案获得了诸多准意向代理商、集成商同仁们的咨询…

2011年认证杯SPSSPRO杯数学建模B题(第二阶段)生物多样性的评估全过程文档及程序

2011年认证杯SPSSPRO杯数学建模 B题 生物多样性的评估 原题再现&#xff1a; 2010 年是联合国大会确定的国际生物多样性年。保护地球上的生物多样性已经越来越被人类社会所关注&#xff0c;相关的大规模科研和考察计划也层出不穷。为了更好地建立国际交流与专家间的合作&…