首页 > 其他分享 >js 打印页面局部区域(指定位置)

js 打印页面局部区域(指定位置)

时间:2023-05-06 19:34:35浏览次数:57  
标签:body 打印 innerHTML js window document 页面

1.情景展示

在浏览器的网页上,我们可以通过window.print()实现网页的打印功能。

但是,该方法打印的是当前网页上面所有展示的内容,如何只打印指定区域内容呢?

如下图所示,只将送检申请单所在区域打印出来,其它位置不用管,如何实现?

2.具体分析

window.print()打印的是全部内容,那我们就可以:

获取到指定区域内容,然后将该区域内容作为整个页面(覆盖掉当前页),调用打印功能。

最后,将原网页内容还原就可以啦。

3.解决方案

//打印
function printPreview() {
	//先获取当前页的html代码
	var body = document.body.innerHTML;
	//需要打印的页面部分
	document.body.innerHTML = document.getElementById("gridPrintView").innerHTML;
	window.print();
	window.close();
	//打印完成之后,还原界面
	document.body.innerHTML = body;
}

在页面上定义一个打印按钮,点击打印,会弹出浏览器自带的打印预览界面。

如上图所示,除了我们要打印的内容外,头部和尾部多了些内容,如何去掉?

把打印选项当中,默认勾选的“页眉和页脚”去掉就可以啦。

我们可以选择使用哪个打印机,纸张大小等。

最后,点击“打印”按钮,完成打印。

写在最后

  哪位大佬如若发现文章存在纰漏之处或需要补充更多内容,欢迎留言!!!

 相关推荐:

标签:body,打印,innerHTML,js,window,document,页面
From: https://www.cnblogs.com/Marydon20170307/p/17378303.html

相关文章

  • 记一次使用laravel-snappy把g2和plotly.js图生成pdf踩坑经历
    最近有一个需求,需要把页面上的echarts等js组件生成的图表放到pdf中。使用laravel框架,找到了laravel-snappy这个包,其底层是使用wkhtmltopdf来生成pdf。因为有把数据点都画到箱型图上的需求,找到了plotly.js这个组件,功能还是很强大的,可以轻松实现如下的效果 页面都没问题,然使用lar......
  • 在 iframe 中继承父窗口 css/js 的方法
    问题缘由iframe属于一个单独的文档(单独的网页窗口)不能直接使用父页面的资源,如css和js。如果iframe和父页面同域则可以在iframe中使用parent对象来使用父页的js对象继承css因为iframe是单独的网页窗口,所以页面一般都有head标签的。在iframe子页面的head......
  • wazuh正则规则,匹配没有用公司打印机打印的日志
     <!--检查使用公司外部打印机打印的行为--><groupname="天擎"><ruleid="100020"level="5"><decoded_as>json</decoded_as><description>TianQing</description><fieldnam......
  • 【转载】JS手从URL中获取指定参数,不需要正则,很方便
    参考https://zhuanlan.zhihu.com/p/412254881代码现代方式在现代浏览器中,我们可以使用浏览器提供的URL对象来获取参数。这里方法最简单,bug少,不用我们操心。functiongetQueryString(name){//consturl=newURL(window.location.href);consturl_string="htt......
  • 常见的js加密方式
      RSA、16进制、Base64都属于可逆加密方式,可以通过相应的解密方法将密文还原为明文。  而哈希算法是不可逆加密方式,只能将明文进行哈希后得到一段固定长度的密文,但无法通过密文还原出明文。其中,SHA算法、MD5算法都是常用的哈希算法。一、16进制加密  加密和解密示例:de......
  • servlet 访问jstl文件出现500情况
    可能原因是导入依赖包出现的问题。<dependency><groupId>javax.servlet.jsp</groupId><artifactId>jsp-api</artifactId><version>2.2</version><scope>provided</scope&g......
  • Three.js教程:访问几何体对象的数据
    推荐:将NSDT场景编辑器加入你的3D工具链其他系列工具:NSDT简石数字孪生访问几何体对象的数据实际开发项目的时候,可能会加载外部模型,有些时候需要获取模型几何体的顶点数据,如果想获取几何体的顶点数据首先要熟悉three.js几何体BoxGeometry和BufferGeometry的结构。访问几何体顶点......
  • vue页面中展示markdown以及katex公式
    场景数据库中有markdown语法的字符串,需要展示为正常的页面,难点在于其中的katex数学公式解决方式使用showdown及其族系插件npmishowdownnpmishowdown-katex<template> <divclass="msg"v-html="transformMsg(msgInfo)"></div></template><script>imports......
  • react-navigation 页面跳转
    使用react-navigation在进行页面跳转的时候,遇到些问题,现在来总结下,主要是web和android的差异react-navigation页面跳转方法navigationnavigate-转到另一个屏幕,找出需要采取的操作replace-用新屏幕替换当前屏幕push-将新屏幕推到堆栈上pop-回到堆栈中popToTo......
  • django的web项目中重定向页面时的部分信息传输——以删除含有分页的列表记录为例
    问题:在管理系统界面往往是有分页的,初次编写列表的删除功能时很可能会出现删完之后页面跳转到第一页的问题,或者筛选完之后删除某一项结果删完之后跳转到未筛选页面。与实际分页管理的效果大庭相径。解决思路:1.起初只遇到了分页的情况,解决方法很简单,在删除按钮的href中直接传值,例......