react + antd 实现打印功能(踩了不少坑)
最近在有网页打印需求,尝试了一下react的打印功能,遇到了不少的坑:
1.react本身有一些打印的组件,但都不好用,都是基于window.print(),但是window.print()如果直接打印的话,没有样式。处理直接当前网页的body设置为你要打印的区域,但是当你取消打印的时候你会发现整个网页都被你要打印的区域占满了,你还得用window.reload()重新加载一下页面,用户交互很不好,建议不要采用这种方式。
2.样式的问题,我们可以通过写内联样式解决,尝试了react的react-inline-css也没试成功。所以,当你页面有打印功能时,打印的区域最好是用内联样式完成。
3.为了解决1中提到的用户交互问题,可以使用iframe的方式解决,具体单面如下:
print=(id)=>{
const el = document.getElementById(id);
const iframe = document.createElement('IFRAME');
let doc = null;
iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:500px;top:500px;');
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
// 引入打印的专有CSS样式,根据实际修改
// doc.write('<LINK rel="stylesheet" type="text/css" href="css/print.css">');
doc.write(el.innerHTML);
doc.close();
// 获取iframe的焦点,从iframe开始打印
iframe.contentWindow.focus();
iframe.contentWindow.print();
if (navigator.userAgent.indexOf("MSIE") > 0)
{
document.body.removeChild(iframe);
}
}
4.二维码无法打印问题:react中一般生成二维码都是用react.qrcode,但是发现这玩意生成的是canvas,不是图片,打印的时候预览不出来。所以我想进一切办法去把canvas转成图片,无奈拿不到这个canvas标签。最后还是用js的qrcode来生成二维码,这样生成的默认是base64位的图片,打印正常。代码如下:
const QRCode = require('qrcode') // 由于是异步的生成,所以最好是通过设置状态来改变二维码图片
getCode =(value) =>{
QRCode.toDataURL(value)
.then(url => {
this.setState({
qrcodeImg:url
})
})
.catch(err => {
console.error(err)
})
}
// 前端通过<div><img src={this.state.qrcodeImg} style={{width:"100px",height:"100px"}}></img></div> 获得
踩了不少坑,希望对大家有帮助。。。。
react + antd 实现打印功能(踩了不少坑)的更多相关文章
- System.Net邮件发送功能踩过的坑
System.Net邮件发送功能踩过的坑 目录 System.Net邮件发送功能踩过的坑 1.EazyEmail邮件发送类库 2.邮件发送授权码与邮件密码 3.通过邮件密码来发送邮件 4.Wiresh ...
- 在react中实现打印功能
最近项目中,前端采用react+antd+dva的组合,已经完成了后头管理类系统产品的更新迭代工作. 今天有一个新需求,需要在后台管理系统中实现点击打印完成指定页面的打印功能. 之前也没接触过,只知道 ...
- 前端打印功能实现及css设置
首先是使用下边代码,实现js局部打印功能.参数dom为需要打印的节点,为了保证页面功能的单一性,最好弹出一个新的预览页面完成打印功能. function print(dom){ var body = ...
- 可视化爬虫Portia安装和部署踩过的坑
背景 Scrapy爬虫的确是好使好用,去过scrapinghub的官网浏览一下,更是赞叹可视化爬虫的犀利.scrapinghub有一系列的产品,开源了大部分项目,Portia负责可视化爬虫的编辑,Sp ...
- Dcloud开发webApp踩过的坑
Dcloud开发webApp踩过的坑 一.总结 一句话总结:HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头.陀螺仪.文件系 ...
- [问题解决]RedHat7更换CentOS7的yum源时踩过的坑
更换yum源的流程 查看当前yum程序 $ rpm -qa|grep yum 这里推荐将其结果截屏或拷贝出来,以免后面报错修复. 删除原有yum源 $ rpm -aq | grep yum|xargs ...
- webpack+react+antd 单页面应用实例
React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...
- 利用React实现表头维度功能
这是我真正意义上地用react实现一些东西.这次分享的是一个很简单的小组件,效果图先放上来: 前端样式用的是一套框架.功能很简单,就是根据选择的维度,在成员里选择对应这个维度的选项. 首先初始化一些数 ...
- typescript+react+antd基础环境搭建
typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接 这里module moduleResolution的配置都会影 ...
随机推荐
- 「洛谷1884」「USACO12FEB」过度种植【离散化扫描线】
题目链接 [洛谷传送门] 题解 矩阵面积的并模板.(请求洛谷加为模板题) 很明显是要离散化的. 我们将矩阵与\(x\)轴平行的两个线段取出来.并且将这两个端点的\(x1\)和\(x2\)进行离散化. ...
- Luogu P4643 【模板】动态dp
题目链接 Luogu P4643 题解 猫锟在WC2018讲的黑科技--动态DP,就是一个画风正常的DP问题再加上一个动态修改操作,就像这道题一样.(这道题也是PPT中的例题) 动态DP的一个套路是把 ...
- Python【第四篇】函数、内置函数、递归、装饰器、生成器和迭代器
一.函数 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可 特性: 减少重复代码 使程序变的可扩展 使程序变得易维护 1.定义 def 函数名(参数): ...
- Django练习——图书管理系统
Django图书管理系统 创建一个项目 1. django-admin startproject 图书管理 2. cmd 命令终端下创建一个app python manage.py startapp ...
- nginx日志相关的查询
IP相关统计 统计IP访问量(独立ip访问数量) awk '{print $1}' access.log | sort -n | uniq | wc -l 查看某一时间段的IP访问量(4-5点) gr ...
- thinkphp5.0 分页中伪静态的处理
1.修改文件\thinkphp\library\think\Paginator.php(此文件用于分页) isurl是否为伪静态 加入isurl用于判断是否使用伪静态分页 */ protected $ ...
- 使用vlc打开usb摄像头
打开vlc播放器 可以打开网络串流的方式打开摄像头,但只支持第一个摄像头 这一串地址拼凑方法看下面,下面可以选择摄像头 为什么只支持第一个摄像头可以参考下一篇使用Vlc.DotNet打开摄像头并截图 ...
- javaScript drag对象进行拖拽使用详解
目录 drag简介 兼容性 drag事件 拖拽流程 DataTransfer对象 drag拖放桌面文件 drag实例 小结 drag简介 HMTL5提供的支持原生拖拽的实现 兼容性如何? 桌面端的支持 ...
- Geometric regularity criterion for NSE: the cross product of velocity and vorticity 2: $u\times \om\cdot \n\times \om$
在 [Lee, Jihoon. Notes on the geometric regularity criterion of 3D Navier-Stokes system. J. Math. Phy ...
- java Concurrent并发容器类 小结
Java1.5提供了多种并发容器类来改进同步容器的性能. 同步容器将所有对容器的访问都串行化,以实现他们的线程安全性.这种方法的代价是严重降低并发性,当多个线程竞争容器的锁时,吞吐量将严重减低. 一 ...