React如何实现浏览器打印部分内容详析


Posted in Javascript onMay 19, 2019

前言

近期着手项目任务的打印功能,在此作个记录,本文介绍基于React的一种调用浏览器打印页面指定内容的方法。

整体思路: 通过构建一个隐藏的元素(该元素包裹需打印的内容),当打印行为触发时,将页面其他的一些不需要打印的元素隐藏,然后将需打印的元素追加到body中,打印完成后,再恢复初始状态即可。浏览器打印的本质还是将web页面中的元素打印出来而已。

1. 构建待打印元素

在页面中构建一个display为none的元素,里面的内容为你需要打印的内容。我们还需要设置包裹打印内容的元素的ref属性,以便于后面获取到元素。

<div style={{ display: 'none' }}>
 <div ref={el => (this.printRef = el)}>
 { 打印内容 }
 </div>
</div>

2. 打印动作触发时的处理

处理流程:

  1. 获取待打印元素;
  2. 将根元素隐藏;
  3. 将待打印元素追加到body中;
  4. 调用浏览器的打印预览;
  5. 预览界面关闭后,将待打印元素从body中移除,将原始页面恢复。
let printView = this.state.printRef //获取待打印元素
document.querySelector('#root').className = 'print-hide' //将根元素隐藏
document.body.appendChild(printView) //将待打印元素追加到body中
window.print() //调用浏览器的打印预览
document.body.removeChild(printView) //将待打印元素从body中移除
document.querySelector('#root').className = '' //将原始页面恢复

对应的CSS设置:

@page {
 size: A4;
 margin: 0;
}
@media print {
 html, body {
  min-width: 0;
  width: 210mm; 
  height: 297mm;
 }
 .print-hide {
 visibility: hidden!important;
 display: none!important;
 }
}

其中,@page中的size可以自己设置纸张的大小,如果是A4纸可以直接设置值为A4,媒体查询@media print中设置的是打印时的样式,因为打印设备知道其输出区域的物理大小,所以使用厘米(cm)、毫米(mm)、英寸(in)等作为打印设计的单位完全可行。

补充(其他原生的打印方法)

直接替换body的内容为要打印的内容,之后再重新刷新页面。

const old = window.document.body.innerHTML //备份原来的页面
window.document.body.innerHTML = ''
window.document.body.appendChild(/* 将你要打印的内容附加到这 */)
window.print() //调用print()函数时,会跳出打印预览的界面,以下的代码被阻塞,关闭预览界面后继续执行
window.document.body.innerHTML = old
window.location.reload() //重新加载旧页面

打开一个新窗口,将打印内容放到新窗口打印,打印结束后关闭新窗口

const newWindow = window.open("打印窗口", "_blank")
const docStr = '<div>test</div>' //需要打印的内容
newWindow.document.write(docStr)
const styles = document.createElement("style")
styles.setAttribute('type', 'text/css') //media="print"
styles.innerHTML = ''
newWindow.document.getElementsByTagName('head')[0].appendChild(styles)
newWindow.print()
newWindow.close()

以上两种方法可能会造成CSS样式应用无效的问题。

3. 注意点

第二小节的步骤2中的意思是:将页面中所有不需要打印的元素隐藏,特别注意像模态窗Model这些元素,也要为它们加上 'print-hide'className属性。

如果需要在特定位置强制分页打印,可以尝试在对应元素上设置page-break-before:always !importantpage-break-after:always !importantCSS属性,该属性只对块级元素有效。

进入打印预览后,我们无法获知用户最终是选择了打印,还是选择了取消。这里若有人知道解决方法的话,欢迎留言。

React如何实现浏览器打印部分内容详析

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JS实现self的resend
Jul 22 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 Javascript
koa-router路由参数和前端路由的结合详解
May 19 #Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 #Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 #Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 #Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 #Javascript
vue+高德地图写地图选址组件的方法
May 18 #Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 #Javascript
You might like
解析PHP提交后跳转
2013/06/23 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
javascript实现的listview效果
2007/04/28 Javascript
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
社区志愿者心得体会
2014/01/03 职场文书
市三好学生主要事迹
2014/01/28 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
工商局个人工作总结
2015/03/03 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
车辆挂靠协议书
2016/03/23 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技