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自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
详解node child_process模块学习笔记
Jan 24 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 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通过COM类调用组件的实现代码
2012/01/11 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
pygame学习笔记(5):游戏精灵
2015/04/15 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
python直接访问私有属性的简单方法
2016/07/25 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
使用Python操作ArangoDB的方法步骤
2020/02/02 Python
Python collections模块的使用方法
2020/10/09 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
《乡愁》教学反思
2014/02/18 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
银行业务授权委托书
2014/10/10 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
红色故事汇观后感
2015/06/18 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript