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 相关文章推荐
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
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中文验证码实现示例分享
2014/01/12 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
2015/11/17 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
vue2单元测试环境搭建
2018/05/24 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
python去掉空白行的多种实现代码
2018/03/19 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
Python使用python-docx读写word文档
2019/08/26 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
python 简单的调用有道翻译
2020/11/25 Python
Servlet的生命周期
2013/08/25 面试题
数控技术与应用毕业生自荐信
2013/09/24 职场文书
电台实习生求职信
2014/02/25 职场文书
上班离岗检讨书
2014/09/10 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
清洁工岗位职责
2015/02/13 职场文书
西柏坡观后感
2015/06/08 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
基于Python实现流星雨效果的绘制
2022/03/18 Python