另类实现(html2canvas)"/>
antd支持html吗,react+antd项目的打印功能的另类实现(html2canvas)
个人处女做《Canvas系列教程》在个人Github上正在连载更新,但愿能获得您的关注和支持,让我有更多的动力进行创做。css
教程介绍、教程目录等能在README里查阅。html
react+antd项目的打印功能的另类实现(html2canvas)
需求:
在react+antd项目中实现指定区域的打印功能。git
环境:
chromegithub
障碍:
一、直接使用浏览器自带打印功能cammand+P并不能将网页完美的打印下来。chrome
原网页部分以下
canvas
经过浏览器自带打印工具效果以下:浏览器
咱们发现,部分样式不能正确显示。antd
巨坑处:系统自带的打印只能抽取html元素,且只能将显示内嵌css的样式,外部引入不行。工具
因而乎就访问强大的搜索引擎“react antd print”和“react antd 打印”和“antd 打印”和“react 打印”,
我找到的全部解决方案以下(而且已经尝试过,):
一、利用iframe配合window.print():将所需区域抽取到新的iframe中,再打印。
结果:失败!抽取iframe的过程当中须要引入外部样式,可是为了减缓antd的巨大致积的影响,按照antd官方建议使用”按需加载“(只加载须要的组件样式),但这就是一个坑了!彻底没办法直接引入antd的按需样式,antd会把样式切割成好多个样式来加载,总不能为了一个打印功能,再专门引入一个antd的样式包彻底版吧。
建议:相对比较好用点的方案,只要能外部引用样式,不存在antd这个坑的话,仍是很好用的。
二、将全部的样式都改写到行内样式中。
结果:失败!心中一阵颤栗,这么多样式你让我一个个加进去,还有没有猿性!?并且,回到antd的坑,css仍是没办法直接内嵌到行内。
建议:代码比较少比较好用,多了就GG了
结果:失败!这个缺点是须要额外安装控件,并且目前只有exe版本,不能知足全部人的需求。不过它的对于打印的多样化支持真的是挺友好的,能够知足需求的朋友能够尝试一下。
建议:按照需求吧,万一平台使用者都是win使用者呢,那协商一下还能算好用。
四、经过react-to-print或者react-easy-print。
结果:失败!看看他们的star数就知道不成熟,并且,我这代码已经完毕了,再重头重构代码估计我会疯掉。ps:我试了以后果真有bug,仍是“官方级”的bug,不想多说,移步相关issue便可明白我说的是什么。
建议:等成熟点以后再试着使用吧。
五、原创:经过html2canvas生成canvas再转化为图片再打印。
结果:宾果!完美实现!html2canvas是一个至关于“网页截屏”的包,简单好用,成功经过屏幕截屏实现想要的内容,而且这个包还有其余功能好比“忽略某些元素”等等。
不过这个地方我遇到了一个百度谷歌都找到不到的html2canvas的ignoreElements事例,通过几个小时的摸索后实现,开心!
建议:通常能应对大部分的相似需求,不过这个包中有一部分属性是针对不一样浏览器而不能完美实现的,并且有一些很小的坑好比“canvas转化的图片不清晰”,不过好在网上有相似的解决方案,也不失它的star数。
总结:
真相只有一个!react的坑仍是须要不少人慢慢踩,antd也是,慢慢来吧~
嗯!颇有成就感!
更多推荐
antd支持html吗,react+antd项目的打印功能的另类实现(html2canvas)
发布评论