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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
JQuery 学习笔记 选择器之三
Jul 23 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
jquery获取tagName再进行判断
May 29 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
vue全局使用axios的操作
Sep 08 Javascript
vue如何清除浏览器历史栈
May 25 Vue.js
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模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
JS实现躲避粒子小游戏
2020/06/18 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
python实现五子棋小程序
2019/06/18 Python
基于python实现雪花算法过程详解
2019/11/16 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
建筑专业自荐信
2013/10/18 职场文书
毕业生优秀推荐信
2013/11/26 职场文书
英语教学随笔感言
2014/02/20 职场文书
消防工作实施方案
2014/06/09 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
贷款工资证明范本
2015/06/12 职场文书
python微信智能AI机器人实现多种支付方式
2022/04/12 Python
oracle数据库去除重复数据
2022/05/20 Oracle