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