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…

tcp接受命令执行并回显

为了实现循环执行命令并能够多次从TCP客户端接收命令&#xff0c;您需要对上面的代码进行一些修改。下面是一个修改后的示例&#xff0c;它将在接收到新的TCP连接后进入一个循环&#xff0c;不断地读取命令、执行命令&#xff0c;并将结果发送回客户端&#xff0c;直到客户端断…

【AcWing】蓝桥杯集训每日一题Day27|矩阵乘法|快速幂|205.斐波那契(C++)

205.斐波那契 205. 斐波那契 - AcWing题库难度&#xff1a;中等时/空限制&#xff1a;1s / 64MB总通过数&#xff1a;3220总尝试数&#xff1a;4747来源&#xff1a;《算法竞赛进阶指南》算法标签数学知识矩阵乘法快速幂 题目内容 在斐波那契数列中&#xff0c; F i b 0 0 …

【学习路径】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…

2024-04-12 问AI: 在深度学习中,什么是参数,什么是超参数?

文心一言 在深度学习中&#xff0c;参数和超参数是两个非常重要的概念&#xff0c;它们在模型的训练和调优过程中起着关键的作用。以下是它们的基本定义和区别&#xff1a; 参数&#xff08;Parameters&#xff09;&#xff1a; 参数是模型在训练过程中学习的变量。它们是从数…

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;所产生的一切不良后果与文章作者无关。该…

报错[Vue warn]: $attrs is readonly. $listeners is readonly.

可能是加载了多个Vue实例导致&#xff0c;解决方法 vue.config.js chainWebpack: config > {config.resolve.alias.set(, resolve(src)).set(vue, resolve(./node_modules/vue))},然后重新运行项目即可

【.net core】【sqlsugar】联表查询与实体自动映射语法

官方文档&#xff1a;联表查询、关联查询、JoinTable、连表查询、Left Join - SqlSugar 5x - .NET果糖网 Join用法&#xff1a;语法糖2 Select 用法&#xff1a;自动映射 //类A 数据库字段与类成员一致 public class ClassA{//主键IDpublic int id{get;set;}//名称public st…

车内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;我们着眼于自动化如何改变无线网络的动态。智慧矿山要求运营商无缝集成多个系统和应用程序…